在vue中使用html2canvas和qrcode生成海报的踩坑记录

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部分

 
//生成的url地址 放到图片里 就可以了 就这么简单

效果图

image.png

点击保存图片 生成图片 这里是用a标签的download属性 直接下载成了图片

  保存到相册

image.png

然后 图片就是这样

image.png

这就是我的踩坑记录了 写的比较仓促 5分钟 写的 有什么问题请私聊我改正。谢谢支持。当然有问题可以私信我帮忙。互相学习进步 wx:15515079336