html2canvas 如何生成高清圖片

馬忠志發(fā)布于2019-08-20 12:01 / 2399人閱讀

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

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

正常渲染
使用html2canvas正常渲染出來在手機(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會把間距也渲染出來就很難處理了。

如果對你有幫助?；蛘呦腙P(guān)注更多可以看看博客

云服務(wù)器 GPU云服務(wù)器生成圖片生成圓角圖片文字生成圖片圖片生成視頻

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80747.html

發(fā)表評論

登陸后可評論

0條評論

馬忠志

男|高級講師

我要關(guān)注我要私信

TA的文章

阿里OSS工具類

閱讀 2762·2021-11-19 09:40
極兔云：企業(yè)級CDN加速,免備案CDN、香港美國CN2 GIA回國帶寬,10G流量僅1元體驗(yàn)

閱讀 5345·2021-09-27 14:10
自動化測試到底怎么開展？

閱讀 2114·2021-09-04 16:45
極光KVM-美西CUVIP大帶寬，1核1G/40G SSD/100M 1TB流量，限時(shí)首發(fā)：139元

閱讀 1491·2021-07-25 21:37
CSS三欄布局——多種方法詳解，比較兼容性

閱讀 3009·2019-08-30 10:57
值得參考的css理論：OOCSS、SMACSS與BEM

閱讀 2992·2019-08-28 17:59
重學(xué)前端學(xué)習(xí)筆記（十四）--瀏覽器工作解析（四）

閱讀 1064·2019-08-26 13:46
Express 文檔（目錄）

閱讀 1418·2019-08-26 13:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

html2canvas 如何生成高清圖片

相關(guān)文章