Package Exports

material-image

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (material-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

MaterialImage

Working!

$ npm i material-image -S

使用方法

ES6 Module:

import MaterialImage from 'material-image';

const myDom = document.querySelector('.my-dom');
new MaterialImage({
  el: myDom,
});

Script:

<!-- Use cdn -->
<script src="//unpkg.com/material-image/dist/materialImage.min.js"></script>
<script>
    var body = document.querySelector('body');
    new MaterialImage({
      el: body
    });
</script>

Configs:

参数	类型	默认值	描述
el	Element	body	插入canvas的DOM节点
debug	Boolean	false	调试模式开关
output	String	background	三种输出模式，可选值：`background`、`image`、`canvas`
imageType	String	jpeg	输出为图片时（`background`、`image`）的图片类型
quality	Number	1	输出为图片时（`background`、`image`）的图片质量，取值 `0~1` 之间

Methods:

名称	描述
protract	重新绘制canvas
adjust	调整canvas尺寸
destroy	移除canvas节点
toDataUrl	生成 base64Url，参数 `(imageType, quality)`

生成策略

随机一定数量的颜色，再随机画出不同尺寸、位置的图形（矩形和圆）。

开发计划

预定几种生成策略，比如同心圆、连续一定角度排列的矩形等。添加元素移动效果。

Wait me!