查看: 79|回复: 0

扣丁学堂告诉你html2canvas把div保存图片高清图的方法

发表于 2018-5-30 13:11:16

本篇文章扣丁学堂html5培训小编给大家分享html2canvas把div保存图片高清图的方法示例及相关资料,对html5开发技术感兴趣的小伙伴可以看一下以作参考。

扣丁学堂HTML

扣丁学堂HTML
1、选择html2canvas版本(这个版本可以放大倍数保证图片清晰)
默认生成的 canvas 图片在 retina 设备上显示很模糊,处理成 2 倍图能解决这个问题:
var w = $("#code").width();
var h = $("#code").height();
//要将 canvas 的宽高设置成容器宽高的 2 倍
var canvas = document.createElement("canvas");
canvas.width = w * 2;
canvas.height = h * 2;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
var context = canvas.getContext("2d");
//然后将画布缩放,将图像放大两倍画到画布上
context.scale(2,2);
html2canvas(document.querySelector("#code"), {
    canvas: canvas,
    onrendered: function(canvas) {
        ...
    }
});
下载方法:
.on('click','.download',function(){
                $('#mycanvas').remove();
                var _height=$('.skinReport').height();
                //滚到顶部
                $('html, body').animate({scrollTop:0});
                if(confirm('是否下载肌肤检测报告?'))
                {
                    setTimeout(function(){
                        var canvas = document.createElement("canvas"),
                            w=$('#skinReport').width(),
                            h=$('#skinReport').height();
                        canvas.width = w * 2;
                        canvas.height = h * 2;
                        canvas.style.width = w + "px";
                        canvas.style.height = h + "px";
                        var context = canvas.getContext("2d");

以上就是给大家分享的html2canvas把div保存图片高清图的方法,想要了解更多html5相关内容的小伙伴可以登录扣丁学堂官网查询,扣丁学堂不仅有专业的老师和与时俱进的课程体系,还有大量的html5视频教程供学员观看学习,想要学习html5的小伙伴快选择专业的html5在线学习机构扣丁学堂学习吧。扣丁学堂H5技术交流群:559883758。



文章转载自:扣丁学堂http://www.codingke.com/


回复

使用道具 举报