【vue】生成海报并下载

1. 思路1
   利用布局将图片与二维码结合；
   然后使用html2Canvas截取需要部分的，并生产图片的base64；
   再通过超链接download将截取的图片下载。

   // 通过点击事件调用这个方法就能进行截取了，注意querSelector中要写入想要截取部分的选择器
    doCut() {
         let that = this;
         html2canvas(document.querySelector("#poster")).then((canvas) => {
           const img = new Image();
           img.src = canvas.toDataURL("png");
           img.setAttribute("crossOrigin", "anonymous");
           canvas.height = 500; // 自定义图片宽度
           var context = canvas.getContext("2d");
           img.onload = function () {
             var w = img.width;
             var h = img.height;
             context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
             var imgUrl = canvas.toDataURL("image/png");
             // 根据生成的图片地址imgUrl（base64）进行后续保存操作
             that.saveImg(imgUrl)
           };
         });
       },
       // 保存base64图片
       saveImg(imgUrl) {
         var link = document.createElement('a');
         link.href = imgUrl;
         link.download = "nft_poster.png";
         link.click();
       },
   

   // 生成二维码，布局部分就暂时不展示了
   <div class="qrCodeBox">
     <qr-code-vue3
       class="qrCodeVue3"
       :width="100"
       :height="100"
       value="https://baidu.com"
       :image="require('@/assets/image/63105903_p0.jpg')"
       :qrOptions="{
         typeNumber: 0,
         mode: 'Byte',
         errorCorrectionLevel: 'H',
       }"
       :imageOptions="{
         hideBackgroundDots: true,
         imageSize: 0.4,
         margin: 10,
       }"
       :dotsOptions="{
         type: 'rounded',
         color: '#26249a',
         // gradient: {
         //   type: 'linear',
         //   rotation: 0,
         //   colorStops: [
         //     { offset: 0, color: '#26249a' },
         //     { offset: 1, color: '#26249a' },
         //   ],
         // },
       }"
       :backgroundOptions="{ color: '#ffffff' }"
       :cornersSquareOptions="{
         type: 'extra-rounded',
         color: '#000000',
       }"
       :cornersDotOptions="{ type: undefined, color: '#000000' }"
       fileExt="png"
       :download="false"
       myclass="my-qur"
       imgclass="img-qr"
       downloadButton="my-button"
       :downloadOptions="{ name: 'vqr', extension: 'png' }"
     />
   </div>
   

   html2Canvas传送门
   生成二维码的插件传送门，傻瓜式使用哦！
   注意： 存在一个弊端，因为图片是通过截图形成的，所以图片尺寸受屏幕大小影响。

2. 思路2
   提供背景以及文本等相关素材,直接生成canvas，再下载。（vue3.0 中使用本插件，错误提示 h is not a function）。我再插件中引入 import {h} form ’vue‘; 但是页面仍然没有显示我要的东西。
   所以还是留着后面探索吧！vue2.0中应该可以正常使用。
   vue-canvas-poster传送门

3. 思路3
   把各元素统一放入canvas，并布局，然后转化image。传送门