html2canvas 如何生成高清圖片

qq493831245發表於2019-02-16
HTMLCanvas

需求
我的需求是在手機頁面講一段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會把間距也渲染出來就很難處理了。

如果對你有幫助。或者想關注更多可以看看部落格

相關文章