html2canvas透明度,html2canvas 生成的图片有左上透明边或者白边的问题

最近项目需要做一个html转图片,并且长按分享的功能.在网上找了一下,就找到了html2canvas.js这个插件.

开发过程中主要遇到2个问题.

1.转出来的图片不够清晰,很模糊.但是左上不会有透明或者白边的问题

解决:上网搜了一下解决方案,主要是要放大画布.原理未细究.

2.图片清晰,但是图片内容会产生偏移.经过测试发现是父节点的margin和padding造成的偏移

解决:

...javascript

var cw = document.querySelector('#bg').clientWidth,

toimg = document.querySelector('#toimg'),

iw = toimg.clientWidth;

context.scale(2,2);

context.translate((cw-iw)/2*-1,toimg.getBoundingClientRect().top*-1);

...

主要是用context.translate(x,y)这个方法纠正偏移量.

因为图片百分比居中,x需为确定数值,所以动态计算左边距成px,y同理.

如果需要转的html包裹的父类宽度==body的宽度,可以使用offsetLeft和offsetTop来赋值x,y.