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!