html2canvas 截图清晰度优化

2019-07-17  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读