当前位置： 首页 > news >正文

canvas.toDataURL生成图片报错的解决方案

news 文章来源：https://blog.csdn.net/amswait/article/details/130107357 2025/2/12 19:46:32

问题原因：

toDataURL方法存在跨域限制，如果执行时dom内含有跨域的图片则浏览器执行时会报错。
这个根据不同的系统有不同的表现，例如：生成完毕但控制台有warning类型的警告，或者直接异常报error。

解决思路：

解决图片的跨域问题需要前后的配合进行，测试进行时发现服务端是支持CORS跨域的，因此在前端设置下img的CORS属性即可，如果设置后不生效的话需要考虑下是不是由于请求资源都会在CDN服务器中缓存，所以设置后会存在不生效的情况。此情况在图片地址后追加时间戳，绕过CDN直接请求服务器即可。由于项目开发情况复杂，在头部进行统一设置，就不用考虑插件差异的情况了；

解决方案：

资源服务器给图片设置cors请求头允许跨域请求，前端设置图片的crossOrigin属性为anonymous来允许跨域，并且在图片后缀添加时间戳，防止请求CDN缓存资源；

完整示例代码如下：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script><script>$(document).ready(function () {var imgs = $('img');for (var i = 0; i < imgs.length; i++) {imgs[i].crossOrigin = "Anonymous"imgs[i].src = imgs[i].src + '?' + (+new Date());}})</script>
</head><body>原图（注意观察图片追加的时间戳与属性）：<img id="test" src="自行替换" alt=""><hr>生成:
</body><script>function convertImageToCanvas(image) {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;canvas.getContext("2d").drawImage(image, 0, 0);return canvas;}function convertCanvasToImage(canvas) {var image = new Image();image.src = canvas.toDataURL("image/png");return image;}function draw(img) {var cs = convertImageToCanvas(img);var image = convertCanvasToImage(cs);document.body.appendChild(image);}window.onload = function () {var img = document.getElementById("test");img.onload = draw(img);}
</script>
</html>

相关文章：

canvas.toDataURL生成图片报错的解决方案

问题原因&#xff1a; toDataURL方法存在跨域限制&#xff0c;如果执行时dom内含有跨域的图片则浏览器执行时会报错。 这个根据不同的系统有不同的表现&#xff0c;例如&#xff1a;生成完毕但控制台有warning类型的警告&#xff0c;或者直接异常报error。 解决思路&#xff…...

编程日记 2023/4/13 17:43:57

电容笔和Apple pencil的区别是什么？好用电容笔推荐

Apple Pencil与目前市场上常见的电容笔最大的不同之处在于&#xff0c;普通电容笔并不具备苹果Pencil特有的重力压感&#xff0c;而仅仅是一种倾斜的压感。不过&#xff0c;其在其它方面的表现也很出色&#xff0c;与Apple Pencil相似&#xff0c;而且价格仅为200元。现在&…...

编程日记 2023/5/31 14:39:31

关于onnx 转ncnn 的问题

文章目录修改模型Detect层设计转换后处理优质文章由于有些操作是没法支持的 如5维的操作&#xff1a; Unsupported slice axes ! Unsupported slice axes ! Unsupported slice axes ! Unsupported slice axes ! Unsupported slice axes ! Unsupported slice axes !参考&#…...

编程日记 2023/5/31 13:08:06

设计模式之《责任链模式》

------《责任链模式》责任链模式的概念为什么用责任链模式工作中用在哪里设计思路代码实现总结责任链模式的概念 责任链模式是一种行为型设计模式&#xff0c;它允许你将请求沿着处理链传递&#xff0c;直到有一个处理者能够处理该请求为止。 在责任链模式中&#xff0c;每个…...

编程日记 2023/4/13 17:28:54

Android Studio实现多功能日记本

项目目录一、项目概述二、系统特点三、开发环境四、详细设计1、E-R图2、数据库3、系统设置五、运行演示一、项目概述 本次实现了功能实用且齐全的日记本&#xff0c;界面友好&#xff0c;使用便捷&#xff0c;采用MVC架构设计。使用SQLite数据库存储数据&#xff0c;数据表有主…...

编程日记 2023/4/13 17:23:52

只依赖Tensorrt和opencv的yolov5源代码

simple_yolo.hpp #ifndef SIMPLE_YOLO_HPP #define SIMPLE_YOLO_HPP/*简单的yolo接口&#xff0c;容易集成但是高性能 */#include <vector> #include <memory> #include <string> #include <future> #include <opencv2/opencv.hpp>namespace Si…...

编程日记 2023/5/31 21:52:37

多路I/O转接 poll（了解）

poll() 的机制与 select() 类似&#xff0c;与 select() 在本质上没有多大差别&#xff0c;管理多个描述符也是进行轮询&#xff0c;根据描述符的状态进行处理&#xff0c;但是 poll() 没有最大文件描述符数量的限制&#xff08;但是数量过大后性能也是会下降&#xff09;。 p…...

编程日记 2023/5/31 13:10:52

听说你也在为配置tomcat server而烦恼，看我这一篇，让你醍醐灌顶！

一.通过maven创建项目 二.下载tomcat服务器 我们一般在tomcat官网中进行tomcat的下载 Apache Tomcat - Welcome! 三.添加配置&#xff1a;我们点击下图中的文件配置 四.测试配置的tomcat 我们在文件的body中输入 测试内容&#xff1a; 在控制台中显式tomcat运行的信息&#…...

编程日记 2023/4/13 17:08:49

【从零开始学Skynet】工具篇（二）：虚拟机文件的复制粘贴

大家在Linux系统下开发的时候肯定会遇到虚拟机与主机间无法复制粘贴的问题&#xff0c;现在我们就来解决这样的问题&#xff0c;方便我们的开发。 1、打开设置 我们可以系统界面的菜单栏点击“控制”&#xff0c;然后打开“设置”&#xff1b; 也可以在VirtualBox界面打开“设…...

编程日记 2023/4/13 17:03:48

全球自动驾驶竞争力最新排行榜，4家中国企业上榜

发展至今&#xff0c;自动驾驶技术不仅是汽车行业的一个主战场&#xff0c;更是全球科技领域中备受关注和充满竞争的一个重要领域。近年来&#xff0c;各大汽车制造商和科技公司都在投入大量财力物力人力进行自动驾驶技术的研发&#xff0c;并进一步争夺市场份额。 当然&#…...

编程日记 2023/5/31 13:13:11

APP启动流程分析

1、要分析的问题 1、与正常trace比对&#xff0c;确认过耗时在哪个步骤&#xff08;am create/pause/stop/start/doframe)&#xff1f; 2、与正常trace比对&#xff0c;确认过耗时在哪个cpu state(Running/Runnable/Sleep/Uninterruptible Sleep)&#xff1f; 2、启动分析 …...

编程日记 2023/6/1 6:36:47

IIR数字滤波器简介与实现

一、简介&#xff1a; IIR是一种数字滤波器&#xff0c;其输出是输入信号和过去输出的某些加权和。IIR滤波器由反馈和前馈组成&#xff0c;可以用于滤除或增强信号的特定频率成分。 IIR滤波器的输出表示为&#xff1a; y[n] b0 * x[n] b1 * x[n-1] b2 * x[n-2] … - a1 * …...

编程日记 2023/4/13 16:48:44

3.5 函数的极值与最大值和最小值

学习目标&#xff1a; 我要学习函数的极值、最大值和最小值&#xff0c;我会采取以下几个步骤&#xff1a; 理解基本概念&#xff1a;首先&#xff0c;我会理解函数的极值、最大值和最小值的概念。例如&#xff0c;我会学习函数在特定区间内的最高点和最低点&#xff0c;并且理…...

编程日记 2023/5/31 13:14:08

第五十八天打卡

第五十八天打卡 739. 每日温度 提示 中等 1.5K company 亚马逊 company Facebook company 字节跳动 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在…...

编程日记 2023/5/31 13:15:18

双一流大学计算机专业月薪拿2000？网友：我裂开

**“计算机不行了”“求求不要再学计算机”……**这样的言论时不时就会在网上掀起一番热议&#xff0c;知了姐看得不少。尤其最近有则新闻&#xff0c;更是给计算机专业盖上“不值钱”的帽子。 某985、211大学校招会上&#xff0c;有企业招聘计算机相关岗位时&#xff0c;提出…...

编程日记 2023/5/31 21:53:49

ChatGPT的“N宗罪”？｜AI百态（上篇）

序&#xff1a; AI诞生伊始&#xff0c;那是人人欣喜若狂的科技曙光&#xff0c;深埋于哲学、想象和虚构中的古老的梦&#xff0c;终于成真&#xff0c;一个个肉眼可见的智能机器人&#xff0c;在复刻、模仿和服务着他们的造物主——人类。 但科技树的点亮&#xff0c;总会遇到…...

编程日记 2023/4/13 16:28:39

48.现有移动端开源框架及其特点—MDL（mobile-deep-learning）

48.1 功能特点 一键部署，脚本参数就可以切换ios或者android支持iOS gpu运行MobileNet、squeezenet模型已经测试过可以稳定运行MobileNet、GoogLeNet v1、squeezenet、ResNet-50模型体积极小，无任何第三方依赖。纯手工打造。提供量化函数，对32位float转8位uint直接支持，模型…...

编程日记 2023/4/13 16:23:37

4.9--计算机网络之TCP篇之TCP Keepalive 和 HTTP Keep-Alive --（复习＋大总结）---沉淀ing

HTTP 的 Keep-Alive&#xff0c;是由应用层&#xff08;用户态&#xff09; 实现的&#xff0c;称为 HTTP 长连接&#xff1b; TCP 的 Keepalive&#xff0c;是由 TCP 层&#xff08;内核态&#xff09; 实现的&#xff0c;称为 TCP 保活机制 HTTP 的 Keep-Alive HTTP 是基于…...

编程日记 2023/4/13 16:18:36

qt完善登录界面（2023-4-6）

点击登录按钮后&#xff0c;判断账号和密码是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&#xff0c;给定两个按钮ok和cancel&#xff0c;点击ok后&#xff0c;会清除密码框中的内容&#xf…...

编程日记 2023/4/13 16:13:35

104.（cesium篇）cesium卫星轨道模拟

听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <...

编程日记 2023/4/13 16:08:33

Linux shell编程

Shell脚本入门 touch helloWorld.sh 【创建脚本文件】 vim helloWorld.sh 【编辑文件】 以#!/bin/bash开头 echo "helloWorld" 调用脚本 方式一&#xff1a;bash 【绝对路径|相对路径】 方式二&#xff1a;chomd x helloWorld.sh 绝对…...

编程日记 2023/4/13 16:03:31

Rasa 3.x 学习系列-Rasa [3.5.4] -2023-04-05新版本发布

Rasa 3.x 学习系列-Rasa [3.5.4] -2023-04-05新版本发布 Rasa Pro 3.5 中引入的两项新功能将帮助您更好地测试和保护您的 AI 助手：端到端测试和机密管理。 端到端测试 通过全面的验收和集成测试评估 AI 助手的性能。我们易于更新的端到端测试可以设置为运行每个流程和集成，…...

编程日记 2023/4/13 15:58:30

进程和线程

1.实现多线程 进程&#xff1a;是正在运行的程序 是系统进行资源分配和调用的独立单位 每一个进程都有它自己的内存空间和系统资源 线程&#xff1a;是进程中的单个顺序控制流&#xff0c;是一条执行路径 单线程&#xff1a;一个进程如果只有一条执行路径&#xff0c;则称为单线…...

编程日记 2023/4/13 15:53:29

ps 备忘清单_开发速查表分享

ps 命令速查备忘清单 Linux我们提供了一个名为 ps 的实用程序&#xff0c;用于查看与系统上的进程相关的信息&#xff0c;它是 Process Status 的缩写这份 ps 命令备忘清单的快速参考列表&#xff0c;包含常用选项和示例。入门&#xff0c;为开发人员分享快速参考备忘单。 开…...

编程日记 2023/4/13 15:48:27

【ROS】基于WIFI网络实现图像消息跨机实时传输

【开发背景】 研究机器人目标检测算法的时候&#xff0c;常常需要把推理图像实时展示出来&#xff0c;以供观摩。而ROS1提供的跨机通信方法&#xff0c;要么是配置单Master&#xff0c;要么是配置多Master&#xff1b;一方面配置麻烦&#xff0c;另一方面传输效率低下&#xf…...

编程日记 2023/4/13 15:43:26

一次性说清楚 JAVA的 ThreadPoolExecutor 、newFixedThreadPool 和newCachedThreadPool 等

目录 1、Executors.newCachedThreadPool() 与 Executors.newFixedThreadPool(n) 的区别是什么&#xff1f; 2、Executors.newCachedThreadPool() 与 Executors.newFixedThreadPool(n) 可以调参吗&#xff0c;比如线程大小&#xff0c;线程等待时间 等等 3、newCachedThreadP…...

编程日记 2023/4/13 15:38:24

Android双目三维重建：Android双目摄像头实现双目测距

Android双目三维重建&#xff1a;Android双目摄像头实现双目测距 目录 Android双目三维重建&#xff1a;Android双目摄像头实现双目测距 1.开发版本 2.Android双目摄像头 3.双目相机标定 (1)双目相机标定-Python版 (2)双目相机标定-Matlab版 4.相机参数配置 5.Android 双…...

编程日记 2023/4/13 15:33:22

解决Avoid using non-primitive value as key, use string/number value instead.

Avoid using non-primitive value as key, use string/number value instead. 意思是&#xff1a;避免使用非基本值作为键&#xff0c;而是使用字符串/数字值。 Duplicate keys detected: [object Object]. This may cause an update error. 意思是&#xff1a;检测到重复键:[o…...

编程日记 2023/4/13 15:28:20

重构·改善既有代码的设计.03之重构手法（上）

1. 前言 之前的重构系列中&#xff0c;介绍了书中提到的重构基础&#xff0c;以及识别代码的坏味道。今天继续第三更&#xff0c;讲述那些重构手法&#xff08;上&#xff09;。看看哪些手法对你的项目能有所帮助… 2. 重新组织函数 对函数进行整理&#xff0c;使之更恰当的…...

编程日记 2023/4/13 15:23:18

闭关修炼（0.0 pytorch基础学习）1

基于官网pytorch.org pytorch 动态 比较优秀 py3.7支持是最多的啦 原来anaconda 是蟒蛇的意思 细思极恐 python 是蛇 yi Introduction to PyTorch Tensors — PyTorch Tutorials 2.0.0cu117 documentation omygaga 英语极差 哈哈哈 tensor 多维数组 矩阵二维数组 Tensor…...

编程日记 2023/4/13 15:18:17

软件下载网站模板/南山网站seo

本人机器是windows xpubuntu10.10&#xff0c;原来才装ubuntu时纯粹是为了玩玩&#xff0c;没打算长用&#xff0c;就只分了10G的空间给它&#xff0c;经过一段时间的使用&#xff0c;觉得ubuntu相当好用&#xff0c;许多软件的反应速度都比windows快&#xff0c;(可能是我的xp…...

编程日记 2025/2/12 18:55:24

腾讯网站开发规范/站长网站提交

EEG 基础 脑电图&#xff08;Electroencephalogram,EEG&#xff09;是通过精密的电子仪器&#xff0c;从头皮上将脑部的自发性生物电位加以放大记录而获得的图形&#xff0c;是通过电极记录下来的脑细胞群的自发性、节律性电活动。有常规脑电图、动态脑电图监测、视频脑电图监…...

编程日记 2025/2/12 18:22:06

做网站政府扶持/南京seo培训

内容来源&#xff1a;2017年5月20日&#xff0c;腾讯高级软件工程师吴友强在“中生代技术沙龙系列之互联网大数据”进行《腾讯云大数据实战》演讲分享。IT 大咖说作为独家视频合作方&#xff0c;经主办方和讲者审阅授权发布。阅读字数&#xff1a;1954 | 3分钟阅读嘉宾演讲视频…...

编程日记 2025/2/12 17:30:22

开不锈钢公司怎么做网站/浙江网站seo

目录 1、什么是事务&#xff1f; 2、事务的几个特性&#xff08;ACID&#xff09; 2.1、原子性(Atomicity) 2.2、一致性(Consistency) 2.3、隔离性(Isolation) 2.4、持久性(Durability) 3、MySQL中事务操作 3.1、隐式事务 3.2、显式事务 2.3、savepoint关键字 2.4、…...

编程日记 2025/2/12 17:09:03

最新闻头条新闻/windows优化大师可靠吗

IoC基础篇&#xff08;一&#xff09;--- Spring容器中Bean的生命周期 日出日落&#xff0c;春去秋来&#xff0c;花随流水&#xff0c;北雁南飞&#xff0c;世间万物皆有生死轮回。从调用XML中的Bean配置信息&#xff0c;到应用到具体实例中&#xff0c;再到销毁&#xff0c;B…...

编程日记 2025/2/12 15:55:02

wordpress 视频课堂/湖南专业的关键词优化

一、Config配置简介在微服务系统中&#xff0c;服务较多&#xff0c;相同的配置&#xff1a;如数据库信息、缓存、参数等&#xff0c;会出现在不同的服务上&#xff0c;如果一个配置发生变化&#xff0c;需要修改很多的服务配置。spring cloud提供配置中心&#xff0c;来解决这…...

编程日记 2025/2/12 12:37:28