温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html2canvas实现保存网页为图片,canvas2image解决图片模糊问题

发布时间:2020-07-22 09:28:03 来源:网络 阅读:6324 作者:取什么昵称 栏目:web开发
  1. 下载canvas2image.js和html2canvas.js文件,百度官方即可下载
  2. 具体代码如下
<body>
            <div class="card-bg">
            </div>
</body>

$(function() {
            var canvas2 = document.createElement("canvas");
            let _canvas = document.querySelector('.card-bg');//需要替换成图片的html区域
            //获取宽高
            var w = parseInt(window.getComputedStyle(_canvas).width);
            var h = parseInt(window.getComputedStyle(_canvas).height);
            //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
            canvas2.width = w * 2;
            canvas2.height = h * 2;
            canvas2.style.width = w + "px";
            canvas2.style.height = h + "px";
            //可以按照自己的需求,对context的参数修改,translate指的是偏移量
            //  var context = canvas.getContext("2d");
            //  context.translate(0,0);
            var context = canvas2.getContext("2d");
            context.scale(1.85, 1.7);
            html2canvas(_canvas,{canvas:canvas2}).then(function(canvas) {
                var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                $(".card-bg").html('<img class="down" src="'+imgUri+'" >');
            })
        });
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI