npm下载安装，在vue中引入 import html2canvas from 'html2canvas'
点击生成海报方法cavansimage（）
cavansimage(){
//有时候截图的时候dom节点还没有生成需要异步加载，否者无法获取dom节点的内容。
setTimeout(function(){
//首先置顶 防止页面有滚动条空白页
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
let shareContent = document.querySelector('.imgbox'),//需要截图的包裹的（原生的）DOM 对象
width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度
height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度
canvas = document.createElement("canvas"), //创建一个canvas节点
scale = 1; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = shareContent.clientWidth * scale + "px";
canvas.style.height = shareContent.clientHeight * scale + "px";
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
let opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: false, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
allowTaint:true,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent,opts).then((canvas)=>{
var url = canvas.toDataURL("image/png")
document.querySelector(".down").setAttribute('href',canvas.toDataURL("image/png"));
})
},500)
},
有时候遇到图片是服务器图片 dom无法获取 跨域问题解决方法 ：
useCORS：true必须开启 否则依然是报错
后台服务器开启跨域权限，No 'Access-Control-Allow-Origin' header is present on the requested resource.
开启跨域 在后台配置 比如说用的阿里云oss 在基础配置上配置 这里去看阿里云帮助文档 搜一下cors 就可以找到视频 2分钟就可以看。 其他平台的原理应该一样。
然后在对应的域名上的缓存配置 配置Access-Control-Allow-Origin:*
使用qrcode生成二维码 同样下载好 在vue中引入 import QRCode from "qrcode"
//生成二维码
//写到mounted()里
QRCode.toDataURL(this.url,{
errorCorrectionLevel: "1", //这个是容错率,(建议选较低)更高的级别可以识别
width: 50,
height: 50, //设置二维码图片大小
margin: 0,
})
.then(url => {
console.log(url);
this.qrcode = url
})
.catch(err => {
console.error(err)
})
html部分
<img :src="qrcode" alt="" style="position:absolute;right:0.15rem">
//生成的url地址 放到图片里 就可以了 就这么简单
效果图
image.png
点击保存图片 生成图片 这里是用a标签的download属性 直接下载成了图片
<a class="down" href="" download="downImg"> 保存到相册</a>
image.png
然后 图片就是这样
image.png
这就是我的踩坑记录了 写的比较仓促 5分钟 写的 有什么问题请私聊我改正。谢谢支持。当然有问题可以私信我帮忙。互相学习进步 wx:15515079336
