svg轉成jpg/png圖片，svg含跨域圖片

基本思路：

• 1、獲取svg所有元素；
• 2、把svg轉成svg格式的base64；
• 3、新建img元素，並將svg base64賦值給src；
• 4、onload的時候繪製到canvas畫布內；
• 5、根據所需格式導出jpg或png圖片base64串

svg：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,238,200" id="svg" width="476" height="422">
    <defs>
        <pattern id="raduisImage" patternUnits="objectBoundingBox" width="32" height="32">
            <image xlink:href="https://profile.csdnimg.cn/E/6/D/3_web_xiaolei" x="0" y="0" width="32" height="32" />
        </pattern>
        <linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(3,0,21);stop-opacity:1"/>
            <stop offset="60%" style="stop-color:rgb(30,12,109);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(5,1,26);stop-opacity:1"/>
        </linearGradient>
    </defs>
    <rect cx="0" cy="0" width="238" height="120" style="fill:url(#linearGradient)"/>
    <rect width="226" height="96" x="5" y="14" style="fill:white;stroke-width:0;opacity:0.1;" />
    <text x="16" y="35" style="font-size:11;fill:white;font-weight:600;">svg轉 base64串 圖片</text>
    <line x1="12" y1="50" x2="225" y2="50" style="stroke:#AFABBF;stroke-width:1"/>
    <circle cx="32" cy="76" r="16" fill="url(#raduisImage)"></circle>
    <text x="53" y="70" style="font-size:10;fill:white;">web_xiaolei</text>
    <text x="53" y="82" style="font-size:8;fill:white;">程序虐我千百遍，我待程序如初戀</text>
</svg>

svg效果：

轉成jpg/png：

function loadSvg(){
      var svg = document.getElementById('svg').outerHTML;//獲取svg所有元素
      var img = document.createElement('img'); //新建img
      img.src = 'data:image/svg+xml;base64,'+window.btoa(unescape(encodeURIComponent(svg)))；//svg base64串顯示圖片
      var canvas = document.createElement('canvas'); //新建畫布
      var ctx = canvas.getContext('2d');
      img.onload = function(){
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img,0,0); //把svg base64串圖片繪製到畫圖中
          console.log(canvas.toDataURL('image/jpeg')); //獲取jpg格式的base64串
          console.log(canvas.toDataURL('image/png')); //獲取png格式的base64串
      }
}

base64串顯示效果

由於svg上含有跨域圖片，圖片沒顯示出來，所以最終處理結果：

function loadSvg(){
	//先將svg上的跨域圖片轉成base64顯示，去除跨域問題
      var img0 = document.createElement('img'); 
      img0.crossOrigin = 'anonymous';
      img0.src = 'https://profile.csdnimg.cn/E/6/D/3_web_xiaolei';
      var canvas0 = document.createElement('canvas');
      var ctx0 = canvas0.getContext('2d');
      img0.onload = function(){
          canvas0.width = 32*3;
          canvas0.height = 32*3;
          ctx0.drawImage(img0,0,0,32*3,32*3);
          //將跨域圖片的base64賦值給svg對應圖片
          document.getElementById('svg-img').setAttribute('xlink:href',canvas0.toDataURL());
          
          //重新繪製svg對應的canvas
          var svg = document.getElementById('svg').outerHTML;
          console.log(svg)
          var img = document.createElement('img');
          img.src = 'data:image/svg+xml;base64,'+window.btoa(unescape(encodeURIComponent(svg)))
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          img.onload = function(){
              canvas.width = img.width;
              canvas.height = img.height;
              ctx.drawImage(img,0,0);
              console.log(canvas.toDataURL('image/jpeg'));//得到jpg格式的base64串
              console.log(canvas.toDataURL('image/png'));//得到png格式的base64串
          }
      }
}

解決跨域圖片後的base64串顯示結果：