美文网首页
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://segmentfault.com/a/1190000011478657文档:http://h...

  • html2canvas.js网页截图

    screenshot(){ console.log('自动截图') //自动截图 html2canvas($("...

  • html2canvas截图的清晰度问题

    首先请关注官方更新。——————————————————————————————————————html2canv...

  • JS将HTML生成PDF并下载

    1. html2canvas 简介我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行“截图”。...

  • Blob文件保存

    html2Canvas截图并保存 后台返回excel数据流前端实现保存

  • 前端插件

    截图插件:html2canvas适配:flexible全景图:https://zhuanlan.zhihu.com...

  • 使用html2canvas将html转为图片

    使用html2canvas将html转为图片,网上找的解决清晰度问题大多存在最后生成的图片错位或者偏移问题。 布局...

  • html2canvas截图

    1.下载 2.main.js引入 3-1.实际使用:如图我想把这个vue标志截图下来,需要用ref先获取节点元素 ...

  • html2canvas截图

  • html2canvas截图

    时间仓促,长话短说。 用法 页面上需要具备的元素有两个: 要截图的区域 截完图后放图的元素 代码: dataURL...

网友评论

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

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