需求
我的需求是在手機頁面講一段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會把間距也渲染出來就很難處理了。
更多html2canvas 如何產生高畫質圖片 相關文章請追蹤PHP中文網！
