html2canvas不能截取svg中image标签（解决）

由于在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 href="https://file.huistone.com/project/2020/12/17/f981ace909cf4ec09af81351bf66e610/2.jpg" 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;
}

标签：canvas,img,svg,image,base64,html2canvas,href,var
来源： https://blog.csdn.net/zhuzhucaicai/article/details/122101441