html2canvas 如何生成高清图片

马忠志发布于2019-08-20 12:01 / 2498人阅读

摘要：需求我的需求是在手机页面讲一段转成图片让用户可以保存所以之前那段则不需要显示了。正常渲染使用正常渲染出来在手机上显示非常的模糊。如果对你有帮助。

需求
我的需求是在手机页面讲一段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会把间距也渲染出来就很难处理了。

如果对你有帮助。或者想关注更多可以看看博客

GPU云服务器云服务器生成图片生成圆角图片文字生成图片图片生成视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80747.html

html2canvas 如何生成高清图片

摘要：需求我的需求是在手机页面讲一段转成图片让用户可以保存所以之前那段则不需要显示了。正常渲染使用正常渲染出来在手机上显示非常的模糊。如果对你有帮助。需求我的需求是在手机页面讲一段html转成图片让用户可以保存,所以之前那段html则不需要显示了。正常渲染使用html2canvas正常渲染出来在手机上显示非常的模糊。代码如下： var dom = $(#id); html2canvas...

summerpxy 2019-08-01 15:55 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

zhaochunqi 2019-08-01 17:43 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

GHOST_349178 2019-08-21 16:51 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

Galence 2019-08-30 15:53 评论0 收藏0