【无标题】

关于 html2canvas 截图后safari报 SecurityError: The operation is insecure.的问题

html2canvas canvas.toDataURL safari

canvas.toDataURL 后 SecurityError: The operation is insecure. 报错

1. 是否加载了跨域图片，如果是 html2canvas 报错可以 配置下

useCORS: true
allowTaint: true

2. 如果是为了展示图片 配置图片跨域

   var img = new Image();
   img.crossOrigin = '';
   img.onload = function () {
       context.drawImage(this, 0, 0);
       context.getImageData(0, 0, this.width, this.height);
   };
   img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';
   

3. 最后这样是我这样的情况

      1. 个人认为是 safari 的bug 
      2. 图片加载了 svg 图， 使用 canvas.toDataURL safari 报 ` SecurityError: The operation is insecure.`  chrome 不会
      3. 没有看浏览器源码 但是我个人任务 safari 判断了 svg 的命名空间的属性
   

最后解决方案：

删除了 svg xmlns 不报安全问题了 ，可以通过 html2canvas 的options 中 logging 参数来 看下加载的内容 进行处理

- <svg width="1" height="265" viewBox="0 0 1 265" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg width="1" height="265" viewBox="0 0 1 265" fill="none" >

参看文章：

• https://github.com/niklasvh/html2canvas/issues/2688

• https://www.zhangxinxu.com/wordpress/2018/02/crossorigin-canvas-getimagedata-cors/

• https://stackoverflow.com/questions/33972254/svgpng-from-canvas-todataurl-throws-dom-exception-18-security-error-in-safari-9