c html2canvas,Html2canvas Note

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

如何利用html2canvas生成透明图片

最近在做的业务中，需要将带有圆角样式(border-radius)的div转化成图片，一开始使用html2canvas去做转化，但1.0.0版本的生成的图片会把透明背景变成白色。

代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17dropImg () {

letimg_target = this.$refs.copyImageArea, res, self = this;

letw = $('.drop-img').width(), h = $('.drop-img').height();

letparam = {

allowTaint: false, //允许污染

taintTest: true, //在渲染前测试图片(没整明白有啥用)

scale: 2, // 添加的scale 参数 2是为了兼容安卓端模糊

logging: false, //日志开关，发布的时候记得改成false

useCORS: true,

width: w,

height: h

};

html2canvas(img_target, param).then((canvas) => {

letres = canvas.toDataURL("image/png");

self.downloadUrl = res;//最后的base64为编码的图片路径

});

}实际效果(请放大看效果)

图片中的透明背景变成了白色，不是我们想要的效果，在查(fu)阅(zhi)资(dai)料(ma)和各种尝(beng)试(kui)后，发现需要给html2canvas库降级为0.4.0，这样才会支持透明背景，调用方法区别于1.0.0。

代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17dropImg () {

letimg_target = this.$refs.copyImageArea, res, self = this;

letw = $('.drop-img').width(), h = $('.drop-img').height();

html2png(img_target, {

allowTaint: false,

taintTest: true,

scale: 2,

logging: false,

useCORS: true,

width: w,

height: h,

onrendered: function(canvas) {

letres = canvas.toDataURL("image/png");

self.downloadUrl = res.toString();//由于res不是字符串，因此需要手动转化

}

});

}实际效果(请放大看效果)

!

1、html2canvas1.0.0不支持透明背景的图片，image/png会变成白色；若参数是image/jpeg 会变成黑色。

2、相同功能的库domtoimage支持透明背景，但不支持iphone 报错：SECURITY_ERR: DOM Exception 18: The operation is insecure

据说是因为iphone里的canvas.toDataURL被污染。

解决方法 如static/dom-to-image.js(git地址) 但是如果在iphone里返回canvas 则不能长按保存图片(坑)

综上所述 将html2canvas降级为0.4.1 源码参考static/html2png.min.js(git地址)

补充：

1、html2canvas0.4.0不支持overflow:hidden，因此还需要具体情况具体分析。

2、html2canvas转化成图片最好不要给要转化的dom元素设置媒体查询样式，生成的图片容易样式错乱。

扩展：在PC端生成base64位编码格式图片后的下载方法

代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34/**

* @describe 下载图片

* @public

* @param {String} fileName 下载的文件名称

* @param {String} content 生成图片的base64位编码路径 (带有';base64'字样)

* @return undefined

*/

downloadFile (fileName, content) {

letaLink = document.createElement('a');

letblob = this.base64ToBlob(content); //new Blob([content]);

letevt = document.createEvent("HTMLEvents");

evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为

aLink.download = fileName;

aLink.href = URL.createObjectURL(blob);

aLink.click();

}

/**

* @describe 转化base64代码为blob

* @public

* @param {String} code 生成图片的base64位编码路径

* @return {Object} 支持浏览器下载的blob对象

*/

base64ToBlob(code) {

letparts = code.split(';base64,');

letcontentType = parts[0].split(':')[1];

letraw = window.atob(parts[1]);

letrawLength = raw.length;

letuInt8Array = new Uint8Array(rawLength);

for (leti = 0; i < rawLength; ++i) {

uInt8Array[i] = raw.charCodeAt(i);

}

returnnew Blob([uInt8Array], {type: contentType});

}

dom-to-image生成图片

代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14dropImgs () {

lettempNode = $('.drop-img')[0],

w = $('.drop-img').width(),

h = $('.drop-img').height();

domtoimage.toPng(tempNode,{width: w,height: h}).then((dataUrl)=> {

try {

this.downloadUrl = dataUrl;

} catch (err) {

alert('图片生成失败，请重试！');

}

}).catch(function (error) {

alert(JSON.stringify(error));

});

}