vue中使用html2canvas,图片不清晰问题

1,464 阅读1分钟

vue中使用html2canvas,

import html2canvas from "html2canvas"

<div ref="posterWrap"></div>

//生成海报
makePoster: function(){
    var that = this;
    var postDialog = this.$refs.posterWrap; //需要截图的包裹的(原生的)DOM 对象
    var width = postDialog.offsetWidth; //获取dom 宽度
    var height = postDialog.offsetHeight; //获取dom 高度
    var canvas = document.createElement("canvas"); //创建一个canvas节点
    var scale = 2; //定义任意放大倍数 支持小数
    canvas.width = width * scale; //定义canvas 宽度 * 缩放
    canvas.height = height * scale; //定义canvas高度 *缩放
    var content = canvas.getContext("2d");
    content.scale(scale, scale); //获取context,设置scale
    var rect = postDialog.getBoundingClientRect();//获取元素相对于视察的偏移量
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // content.translate(-rect.left,-rect.top); //设置context位置,值为相对于视窗的偏移量负值,让图片复位
    content.translate(0,-scrollTop); //这里是为了适应页面滚动时,所以设置为页面滚动的高度的负数
    var opts = {
        scale: 0.999, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: true, //日志开关,便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true // 【重要】开启跨域配置
    };
    html2canvas(postDialog,opts).then(function(canvas) {
        var dataURL = canvas.toDataURL("image/png");
        console.log(dataURL)
    });
}

关键点在opts里的scale,设置成1不行,设置成0.75可以,但是截取的图片大小不对,设置成0.999即可