vue - 使用 html2canvas 将页面转为图片，实现分享功能

素颜马尾好姑娘i 2021-09-02 06:04 815阅读 0赞

最近写的需求设计到了分享图片给好友的功能，所以我在这里总结一下实现方法，以及遇到问题的解决方法。

### 一、效果图： ###

##### 1、原页面： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70_pic_center]

##### 2、生成的图片： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70_pic_center 1]

### 二、实现过程： ###

##### 1、首先写好页面： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70_pic_center 2]

##### 2、通过通过对应的id拿到要生成图片的部分，然后通过 html2canvas 转成图片，再调用原生（ios和安卓）的方法分享出去即可 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70_pic_center 3]

##### 相关代码如下： #####

// 生成海报
        createPoster() {
          const vm = this;
          // vm.$loading.show({
          //   text: '加载中'
          // })
          const domObj = document.getElementById('posterHtml');
          console.log('canvas----------->生成海报');
    
          // html2canvas(this.$refs.imageWrapper, {
          html2canvas(domObj, {
            useCORS: true,
            allowTaint: false,
            logging: false,
            letterRendering: true,
            onclone(doc) {
              let e = doc.querySelector('#posterHtml')
              e.style.display = 'block'
            }
          }).then(function (canvas) {
            console.log('canvas----------->', canvas);
    
            // 在微信里,可长按保存或转发
            vm.posterBase = canvas.toDataURL('image/png');
            console.log("canvas.toDataURL('image/png')", canvas.toDataURL('image/png'));
            vm.$loading.hide();
          })
        },

##### 3、如果这个页面是在一个单独的页面中，建议在 mounted 中就开始调用该方法，不过要等页面渲染完毕再调用。 #####

![在这里插入图片描述][20201110095648332.png_pic_center]

### 三、这里补充一下我最近使用 html2canvas 遇到的bug ###

##### 1、html2canvas 转出来的图片上面的线都是实线的，如果想要显示虚线就要自己使用canvas绘制，不过比较建议将虚线换成实线，这样不仅可以减少大量的工作量，同时绘制出来的虚线在某种情况下也有可能不会显示在我们生成的图片上面。 #####

// 用于画虚线
          const titleBorder = document.getElementById('title');
          titleBorder.style.borderBottom = "none";
    
          // html2canvas(this.$refs.imageWrapper, {
          html2canvas(domObj, {
            useCORS: true,
            allowTaint: false,
            logging: false,
            letterRendering: true,
            onclone(doc) {
              let e = doc.querySelector('#posterHtml')
              e.style.borderBottom = 'block'
            }
          }).then(function (canvas) {
            console.log('canvas----------->', canvas);
            // 画虚线  --- Start
            let top = titleBorder.offsetTop * 2,
              left = titleBorder.offsetLeft,
              width = titleBorder.offsetWidth;
    
            var ctx = canvas.getContext("2d");
            ctx.setLineDash([6, 3]);
            ctx.strokeStyle = '#B6B6B6';
            ctx.lineWidth = 1;
            ctx.globalAlpha = 1;
            ctx.beginPath();
            ctx.moveTo(left, top * 7 / 8);
            ctx.lineTo(width + left, top * 7 / 8);
            ctx.stroke();
    
            titleBorder.style.borderBottom = "1px dashed #B6B6B6";
            // 画虚线  --- END
            
    		vm.posterBase = canvas.toDataURL('image/png');
            console.log("canvas.toDataURL('image/png')", canvas.toDataURL('image/png'));
        })

##### 2、用的字体样式 font-family 要使用 Unicode字体，否则生成的字体会直接使用系统默认的字体。 #####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/74a6e3132d294b47a9d409a211fd1e92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/5706db4513af4e2a9e94e7fa3217b4dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/8b9074322d5741c6982ad8b56200ea61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210813/68f8cbe2178f40918c91f83a9910a4f0.png
[20201110095648332.png_pic_center]: /images/20210813/127336c52edf4691b1a4b4eadb38ec13.png