国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

html2canvas 如何生成高清圖片

馬忠志 / 2396人閱讀

摘要：需求我的需求是在手機(jī)頁(yè)面講一段轉(zhuǎn)成圖片讓用戶可以保存所以之前那段則不需要顯示了。正常渲染使用正常渲染出來(lái)在手機(jī)上顯示非常的模糊。如果對(duì)你有幫助。

需求
我的需求是在手機(jī)頁(yè)面講一段html轉(zhuǎn)成圖片讓用戶可以保存,所以之前那段html則不需要顯示了。

正常渲染
使用html2canvas正常渲染出來(lái)在手機(jī)上顯示非常的模糊。代碼如下：

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轉(zhuǎn)成了圖片

優(yōu)化

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清晰度一樣,這里有個(gè)坑就是dom的位置需要在左上角開始位置，不然渲染的canvas會(huì)把間距也渲染出來(lái)就很難處理了。

如果對(duì)你有幫助。或者想關(guān)注更多可以看看博客

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/80747.html

相關(guān)文章

  • html2canvas 如何生成高清圖片

    摘要：需求我的需求是在手機(jī)頁(yè)面講一段轉(zhuǎn)成圖片讓用戶可以保存所以之前那段則不需要顯示了。正常渲染使用正常渲染出來(lái)在手機(jī)上顯示非常的模糊。如果對(duì)你有幫助。 需求我的需求是在手機(jī)頁(yè)面講一段html轉(zhuǎn)成圖片讓用戶可以保存,所以之前那段html則不需要顯示了。 正常渲染使用html2canvas正常渲染出來(lái)在手機(jī)上顯示非常的模糊。代碼如下： var dom = $(#id); html2canvas...

    summerpxy 評(píng)論0 收藏0

  • 網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

    摘要：本次技術(shù)調(diào)研來(lái)源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過(guò)的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來(lái)源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中...

    zhaochunqi 評(píng)論0 收藏0

  • 網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

    摘要：本次技術(shù)調(diào)研來(lái)源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過(guò)的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來(lái)源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中...

    GHOST_349178 評(píng)論0 收藏0

  • 網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

    摘要：本次技術(shù)調(diào)研來(lái)源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過(guò)的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來(lái)源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中...

    Galence 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<