需求
我的需求是在手机页面讲一段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会把间距也渲染出来就很难处理了。
网趣网上购物系统HTML静态版
下载
网趣购物系统静态版支持网站一键静态生成，采用动态进度条模式生成静态，生成过程更加清晰明确，商品管理上增加淘宝数据包导入功能，与淘宝数据同步更新!采用领先的AJAX+XML相融技术，速度更快更高效！系统进行了大量的实用性更新，如优化核心算法、增加商品图片批量上传、谷歌地图浏览插入等，静态版独特的生成算法技术使静态生成过程可随意掌控，从而可以大大减轻服务器的负担，结合多种强大的SEO优化方式于一体，使
立即学习“前端免费学习笔记（深入）”；
更多html2canvas 如何生成高清图片 相关文章请关注PHP中文网！
