解决html2canvas svg元素不显示的问题

思路就是将svg转为canvas，不用借助插件就可以实现，就是将页面的svg元素先转成base64，再用img显示，再将Img转成canvas，最后删除原来的svg元素就可了，赶紧试试吧。

handleSvgToCanvas() {
        //以下是对svg的处理
        //获取页面所有svg元素
        var svgElem = document.getElementsByTagName("svg");
        // 遍历svg元素
        [].forEach.call(svgElem, function(node) {
          var parentElement = node.parentNode;
          const img = new Image();
          // 将svg先转成base64图片形式，再将图片转成canvas
          img.src = `data:image/svg+xml,${encodeURIComponent((new XMLSerializer()).serializeToString(node))}`
          img.crossOrigin = 'anonymous';
          img.onload = function(){
            // 获取当前svg的宽高，onload方法为异步
              const width = node.getBoundingClientRect().width
              const height = node.getBoundingClientRect().height
              const canvas = document.createElement('canvas');
              canvas.width = width;
              canvas.height = height;
              const ctx = canvas.getContext("2d");
              ctx.drawImage(img, 0, 0, width,height);
              parentElement.appendChild(canvas)
              // 删除之前的svg和图片，只保留canvas
              parentElement.removeChild(node);
              parentElement.removeChild(img);
          }
          parentElement.append(img);
      });
    },

如果需要下载图片，只需要参数如下方法就可以实现，其中href 的url值就是base64地址

// 下载图片
downLoad(url) {
      var oA = document.createElement("a");
      oA.download = 'down.jpg';// 设置下载的文件名，默认是'下载'
      oA.href = url;
      document.body.appendChild(oA);
      oA.click();
      oA.remove(); // 下载之后把创建的元素删除
    }

本文章由javascript技术分享原创和收集