html2canvas转换成图片模糊,html2canvas生成图片（移动端），处理生成图片模糊

截 图

function $(selector) {

return document.querySelector(selector);

}

var main = {

init:function(){

main.setListener();

},

//设置监听事件

setListener:function(){

var btnShare = document.getElementById("btnShare");

btnShare.onclick = function(){

main.html2Canvas();

}

},

//获取像素密度

getPixelRatio:function(context){

var backingStore = context.backingStorePixelRatio ||

context.webkitBackingStorePixelRatio ||

context.mozBackingStorePixelRatio ||

context.msBackingStorePixelRatio ||

context.oBackingStorePixelRatio ||

context.backingStorePixelRatio || 1;

return (window.devicePixelRatio || 1) / backingStore;

},

//绘制dom 元素，生成截图canvas

html2Canvas: function () {

var shareContent = $("#page4-img-group");// 需要绘制的部分的 (原生)dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题

var width = shareContent.offsetWidth;  // 获取(原生)dom 宽度

var height = shareContent.offsetHeight; // 获取(原生)dom 高

var offsetTop = shareContent.offsetTop;  //元素距离顶部的偏移量

var canvas = document.createElement('canvas');  //创建canvas 对象

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

var scaleBy = main.getPixelRatio(context);  //获取像素密度的方法 (也可以采用自定义缩放比例)

console.log(scaleBy);

scaleBy = 3;

canvas.width = width * scaleBy;  //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移

canvas.height = (height + offsetTop) * scaleBy;  // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题

context.scale(scaleBy, scaleBy);

var opts = {

allowTaint:true,//允许加载跨域的图片

tainttest:true, //检测每张图片都已经加载完成

scale:scaleBy, // 添加的scale 参数

canvas:canvas, //自定义 canvas

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

width:width, //dom 原始宽度

height:height //dom 原始高度

};

html2canvas(shareContent, opts).then(function (canvas) {

console.log("html2canvas");

alert(canvas.toDataURL())

var body = document.getElementsByTagName("body");

canvas.style.width = canvas.width / scaleBy + "px";

canvas.style.height = canvas.height / scaleBy + "px";

//              body[0].appendChild(canvas);

var src = canvas.toDataURL();

var img = document.getElementById("save");

save.src = src;

save.style.width  = canvas.style.width;

save.style.height  = canvas.style.height;

//              console.log(src);

});

}

};

//最后运行代码

main.init();

把代码放到服务器上可生成图片成功