关于html2canvas清晰度

最近有个小项目 需要生成海报让用户去分享~~~vue做的，海报通过html2canvas 生成。

遇到的最大问题是生成图片的清晰度~~网上找了好多方法。

放大倍数!~网上找的~~
var cntElem = document.querySelector("#capture");
var shareContent = cntElem; //需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
let _this = this;
html2canvas(shareContent, opts).then(canvas => {
})

图片不要以背景图的方式，直接以img标签加载图片通过CSS去处理层次关系

转载于:https://www.cnblogs.com/zhaoyun4122/p/9138570.html