关于html2canvas移动端图片保存模糊的优化方案

还是老办法，为了找到解决方案我也是先四处google和百度，结果可想而知，网上90%的方案都是只适用于他自己的那个项目，调用过来没有用，模糊问题依然解决不了。下面我就自己的项目做出如下解决方案

首先分析下自己项目采用了网上的方法后依然模糊的原因是引用的html2canvas版本太旧了（0.4.1的版本），这个版本不支持配置window.devicePixelRatio这个配置，所以我们需要在github上去下载最新版本的html2canvas引用。把引用升级到最新之后，就能支持window.devicePixelRatio这个配置了。然后在调用的js中做如下配置后在移动端保存的图片马上就清晰了。

var scaleBy = window.devicePixelRatio;

html2canvas(dom[0], {

scale: scaleBy,

onrendered: function (canvas) {

// $("#view777").css("display", "none");
var dataUrl = canvas.toDataURL("image/png",1.0);
                $('.name').attr('src', dataUrl)

}

});

完整的调用代码如下

var dom = $("#name");

var width = dom.width();

var height = dom.height();

var type = "png";

var scaleBy = window.devicePixelRatio;

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

canvas.width = width * scaleBy;

canvas.height = height * scaleBy + 35;

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

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

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

context.scale(scaleBy, scaleBy);

context.font = 'Microsoft YaHei';

html2canvas(dom[0], {

scale: scaleBy,

onrendered: function (canvas) {

// $("#view777").css("display", "none");
var dataUrl = canvas.toDataURL("image/png",1.0);
                $('.name').attr('src', dataUrl)

}

});

以上就是全部内容，本人水平有限，如有不足的地方，还请谅解与指正。
欢迎大家前来交流，谢谢。