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

2021-12-23 11:02:02 阅读：192 来源： 互联网

标签：canvas img svg image base64 html2canvas href var

由于在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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