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

news/2025/1/8 21:20:17/

html2canvas canvas.toDataURL safari

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

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

 useCORS: trueallowTaint: true
  1. 如果是为了展示图片 配置图片跨域

     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';';
  2. 最后这样是我这样的情况

    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" >

参看文章:

  • Operation is insecure in safari · Issue #2688 · niklasvh/html2canvas · GitHub

  • 解决canvas图片getImageData,toDataURL跨域问题 « 张鑫旭-鑫空间-鑫生活

  • SVG>PNG from canvas.toDataURL throws DOM exception 18 security error in Safari 9.x - Stack Overflow


http://www.ppmy.cn/news/92566.html

相关文章

Allure在本地不安装allure服务的情况下打开Allure Html报告

前言 我们使用pytestallure生成Allure测试报告后&#xff0c;需要发给领导查看报告的详细信息。此时我们通过将allure生成的html报告压缩成压缩包后发送给领导&#xff0c;但是领导电脑由于没有安装Allure服务&#xff0c;打开会全部显示“Loading”&#xff0c; 无法查看到报…

经典 SQL 数据库笔试题及答案整理

马上又是金三银四啦&#xff0c;有蛮多小伙伴在跳槽找工作&#xff0c;但对于年限稍短的软件测试工程师&#xff0c;难免会需要进行笔试&#xff0c;而在笔试中&#xff0c;基本都会碰到一道关于数据库的大题&#xff0c;今天这篇文章呢&#xff0c;就收录了下最近学员反馈上来…

MyBatis快速入门

目录 一、什么是MyBatis 二、MyBatis的学习要领 三、搭建第一个MyBatis 3.1 创建数据库和表 3.2 添加MyBatis框架支持 3.2.1 老项目添加MyBatis 3.2.2 新项目去添加MyBatis 3.3 设置MyBatis配置信息 3.3.1 设置数据库连接的相关信息 3.3.2 设置MyBatis xml保存路径 和…

实时频谱分析-2.3实时频谱分析

实时频谱分析 频谱分析要想归入实时类别中&#xff0c;必须没有间隙地、不确定地处理关心的频宽内包含的所有信息。RSA 必须获得时域波形中包含的全部信息&#xff0c;把信息转换成频域信号。实时完成这一点必须满足多个重要的信号处理要求&#xff1a; 1&#xff09;提供足够…

【VLAN如何划分?6个方法帮你解决!好用又简单!】

如何选择交换机&#xff1f;如何根据项目确定网络结构&#xff1f;交换机做为大家工作中最常用的设备之一&#xff0c;关于它的选择&#xff0c;不得不知。 在做项目时都有这样的疑问&#xff0c;因为参数决定了项目预算&#xff0c;常用的园区组网技术也是多种多样。 我们来…

C和指针(一)基础

注释 1&#xff0c;C是自由格式的语言&#xff0c;没有规则要求怎样书写语句&#xff0c;但是遵守约定可以使代码清晰更易阅读。 2&#xff0c;/*和*/成对使用&#xff0c;不能嵌套。 3&#xff0c;需要注释整块代码尽量使用#if…#endif方式&#xff0c;其他注释方式如果代码中…

OpenGL之着色器

文章目录 什么是着色器数据类型输入与输出Uniform三角形渐变色例子从文件中读取 什么是着色器 着色器是使用一种叫GLSL的类C语言写成的。GLSL是为图形计算量身定制的&#xff0c;它包含一些针对向量和矩阵操作的有用特性。着色器的开头总是要声明版本&#xff0c;接着是输入和输…

js对手机号进行脱敏处理

// 手机号码脱敏处理:方法1var phone"13812345678";var strphone.substring(0,3)"****"phone.substring(7);// 手机号码脱敏处理:方法2var phone"13812345678";var strphone.substr(0,3)"****"phone.substring(7);// 区别是&#xff1…