由于在svg中引入的圖標(biāo)是使用的Image標(biāo)簽，根據(jù)href引入，而將svg轉(zhuǎn)換為png/jpg等格式圖片，大概過(guò)程是：首先將svg轉(zhuǎn)換為canvas；然后將canvas保存為圖片。在這個(gè)過(guò)程中href出現(xiàn)了問(wèn)題，導(dǎo)致圖片丟失，因?yàn)閔ref是圖片路徑。經(jīng)過(guò)查找解決方案后發(fā)現(xiàn)，繪制Image標(biāo)簽時(shí)href使用base64編碼可以完美解決圖片丟失的問(wèn)題。

在解決問(wèn)題前：

解決方案：

?先把svg中所有的image標(biāo)簽的href圖片路徑轉(zhuǎn)換為base64編碼格式，再使用html2canvas進(jìn)行截圖。

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標(biāo)簽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進(jìn)行截圖(需要加定時(shí)器延遲操作)
    setTimeout(()=>{
        html2canvas(document.getElementById('view'), {
            backgroundColor:"#fff",//畫出來(lái)的圖片有白色的邊框,不要可設(shè)置背景為透明色（null）
            useCORS: true,//支持圖片跨域
            logging: true, //Enable log (use Web Console for get Errors and Warnings)
        }).then(canvas=>{
            canvas.toDataURL()    //- base64格式
            $('#view').append(canvas)    //也可進(jìn)行下載
            // 如果你需要下載截圖，可以使用a標(biāo)簽進(jìn)行下載
            //let a = document.createElement('a');
            //a.href = canvas.toDataURL();
            //a.download = 'picture';
            //a.click();
        });
    },100)
}
//圖片地址轉(zhuǎn)為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;
}