html2canvas图片的文字偏移,html2canvas转图片遇到的坑（图片偏移，图片模糊，字体改变）...

最近做了一个分享页面，要求长按保存相册，其中用到了html2canvas，使用比较简单，但是遇到的比较常见的几个坑，来做下总结：

1. 解决图片模糊和偏移

$('.share')是需要转成图片的dom

function share() {

var width = $('.share')[0].offsetWidth; //dom宽

var height = $('.share')[0].offsetHeight; //dom高

// 解决图片模糊

var scale = 2;//放大倍数

var canvas = document.createElement('canvas');

canvas.width = width * 2;

canvas.height = height * 2;

canvas.style.width = width + 'px';

canvas.style.height = height + 'px';

var context = canvas.getContext('2d');

context.scale(scale, scale);

//设置context位置，值为相对于视窗的偏移量负值，让图片复位(解决偏移的重点)

var rect = $('.share').get(0).getBoundingClientRect();//获取元素相对于视察的偏移量

context.translate(-rect.left, -rect