需求
我的需求是在手机页面讲一段html转成图片让用户能够保留,所以之前那段html则不须要显现了。

一般衬着
运用html2canvas一般衬着出来在手机上显现异常的隐约。代码以下：

var dom = $("#id");

html2canvas(dom[0], {

canvas: canvas,

onrendered: function (canvas) {

$(dom).css("display", "none");

$(".img-container").append(Canvas2Image.convertToImage(canvas, width * scaleBy, height * scaleBy, type));

}

});

例子中还用了插件canvas2image.js将canvas转成了图片

优化

var dom = $(".content-container .show-content");

var width = dom.width();

var height = dom.height();

var type = "png";

var scaleBy = 3;

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], {

canvas: canvas,

onrendered: function (canvas) {

var all_width = $(window).width();

$("#content-container").css("display", "none");

$(".img-container").append(Canvas2Image.convertToImage(canvas, width * scaleBy, height * scaleBy, type));

$(".img-container img").css("width", all_width + "px").css("height", "aotu");

}

});

如许清晰度险些和原dom清晰度一样,这里有个坑就是dom的位置须要在左上角最先位置，不然衬着的canvas会把间距也衬着出来就很难处理了。

假如对你有协助。或许想关注更多能够看看博客