由于在svg中引入的圖標是使用的Image標簽，根據href引入，而將svg轉換為png/jpg等格式圖片，大概過程是：首先將svg轉換為canvas；然后將canvas保存為圖片。在這個過程中href出現了問題，導致圖片丟失，因為href是圖片路徑。經過查找解決方案后發現，繪制Image標簽時href使用base64編碼可以完美解決圖片丟失的問題。

在解決問題前：

解決方案：

?先把svg中所有的image標簽的href圖片路徑轉換為base64編碼格式，再使用html2canvas進行截圖。

html代碼：

<div id="view">
      <input type="button" value="截圖" onclick="takeScreenshot()" />
      <div style="width:300px;height:150px;background-image:url('https://file.huistone.com/project/2020/12/17/f981ace909cf4ec09af81351bf66e610/2.jpg');"></div>
      <svg>
          <image  style="width:100px;height:100px;"></image>
      </svg>
</div>

JS代碼：

function takeScreenshot() {
    //將svg中所有的image標簽href屬性改為base64編碼
    var imgElem = $("#view").find('image');
    imgElem.each(function (index, node) {
        var img = node.getAttribute("href");
        var image = new Image();
        image.crossOrigin = ''; 
        image.src = img;
        image.onload = ()=>{
            var base64 = getBase64Image(image);
            node.setAttribute("href",base64); //更改href屬性
        }
    })
    //使用html2canvas進行截圖(需要加定時器延遲操作)
    setTimeout(()=>{
        html2canvas(document.getElementById('view'), {
            backgroundColor:"#fff",//畫出來的圖片有白色的邊框,不要可設置背景為透明色（null）
            useCORS: true,//支持圖片跨域
            logging: true, //Enable log (use Web Console for get Errors and Warnings)
        }).then(canvas=>{
            canvas.toDataURL()    //- base64格式
            $('#view').append(canvas)    //也可進行下載
            // 如果你需要下載截圖，可以使用a標簽進行下載
            //let a = document.createElement('a');
            //a.href = canvas.toDataURL();
            //a.download = 'picture';
            //a.click();
        });
    },100)
}
//圖片地址轉為base64編碼
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}