資訊專欄INFORMATION COLUMN
摘要：需求我的需求是在手機頁面講一段轉成圖片讓用戶可以保存所以之前那段則不需要顯示了。正常渲染使用正常渲染出來在手機上顯示非常的模糊。如果對你有幫助。
需求
我的需求是在手機頁面講一段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會把間距也渲染出來就很難處理了。
如果對你有幫助?；蛘呦腙P注更多可以看看博客
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80747.html
摘要：需求我的需求是在手機頁面講一段轉成圖片讓用戶可以保存所以之前那段則不需要顯示了。正常渲染使用正常渲染出來在手機上顯示非常的模糊。如果對你有幫助。 需求我的需求是在手機頁面講一段html轉成圖片讓用戶可以保存,所以之前那段html則不需要顯示了。 正常渲染使用html2canvas正常渲染出來在手機上顯示非常的模糊。代碼如下： var dom = $(#id); html2canvas...
摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。 這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界 將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...
摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。 這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界 將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...
摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。 這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界 將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...
閱讀 2744·2021-11-19 09:40
閱讀 5294·2021-09-27 14:10
閱讀 2099·2021-09-04 16:45
閱讀 1462·2021-07-25 21:37
閱讀 2995·2019-08-30 10:57
閱讀 2981·2019-08-28 17:59
閱讀 1055·2019-08-26 13:46
閱讀 1408·2019-08-26 13:27
