美文网首页
html2canvas转换图片模糊问题

html2canvas转换图片模糊问题

作者: 凡凡的小web | 来源:发表于2020-06-14 16:54 被阅读0次
                var canvas2 = document.createElement("canvas");
                var w = parseInt(window.getComputedStyle($('.main')[0]).width);
                var h = parseInt(window.getComputedStyle($('.main')[0]).height);
                // console.log(w,h)
                //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
                canvas2.width = w * 2.2;
                canvas2.height = h * 2.2;
                canvas2.style.width = w + "px";
                canvas2.style.height = h + "px";
                 //可以按照自己的需求,对context的参数修改,translate指的是偏移量   
                var context = canvas2.getContext("2d");
                context.scale(2,2);

                // var opts = {
                //  // scale: 2, // 添加的scale 参数
                //  canvas: canvas2, //自定义 canvas
                //  // logging: true, //日志开关,便于查看html2canvas的内部执行流程
                //  // width: w, //dom 原始宽度
                //  // height: h,
                //  useCORS: true // 【重要】开启跨域配置
                // };
                
                // html2canvas($(".main")[0], opts).then(function(canvas) {
                //  var dataURL = canvas.toDataURL()
                //  $(".bg").show()
                //  $(".cap").attr("src",dataURL)
                // });
                html2canvas($(".main")[0], {
                    canvas:canvas2,
                    useCORS: true,
                    onrendered: function(canvas) {
                        var dataURL = canvas.toDataURL()
                        $(".bg").show()
                        $(".cap").attr("src",dataURL)
                        that.dataURL = dataURL
                    }
                })

相关文章

网友评论

      本文标题:html2canvas转换图片模糊问题

      本文链接:https://www.haomeiwen.com/subject/ojtfxktx.html