美文网首页
html2canvas 截图清晰度优化

html2canvas 截图清晰度优化

作者: 醉笙情丶浮生梦 | 来源:发表于2019-07-17 19:27 被阅读0次
    createSrc: function (qrcodeImg) {
        console.log("生成海报");
        var that = this
        var dom = document.querySelector('#big-content');
            // 创建 canvas 画布
        var canvas = document.createElement("canvas");
            // 2d 渲染对象
        var context = canvas.getContext("2d");
            // 整个文档的宽高
        canvas.width = dom.offsetWidth * 2;
        canvas.height = dom.offsetHeight * 2;
        var width = dom.offsetWidth;
        var height = dom.offsetHeight;
            // 缩放到两倍大小
        context.scale(2, 2);
    
        // document.getElementById('big-content')
      
        html2canvas(dom, {
                    // 用于渲染的比例。默认为浏览器设备像素比率, 设置两倍没有明显效果
                    scale: 2,
            canvas: canvas,  //自定义 canvas
            width: width,
            height: height,
            useCORS: true,
            onrendered: function (canvas) {
                that.imgCreateUrl = canvas.toDataURL(); //图片地址
                // document.body.appendChild(canvas);
                console.log("生成成功了?" + that.imgCreateUrl);
                mui.previewImage();
            },
        });
    },
    

    参考:https://segmentfault.com/a/1190000011478657
    文档:http://html2canvas.hertzen.com/configuration

    相关文章

      网友评论

          本文标题:html2canvas 截图清晰度优化

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