canvas.toDataURL生成图片报错的解决方案
问题原因：
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生成图片报错的解决方案
问题原因： toDataURL方法存在跨域限制，如果执行时dom内含有跨域的图片则浏览器执行时会报错。 这个根据不同的系统有不同的表现，例如：生成完毕但控制台有warning类型的警告，或者直接异常报error。 解决思路ÿ…...
电容笔和Apple pencil的区别是什么？好用电容笔推荐
Apple Pencil与目前市场上常见的电容笔最大的不同之处在于，普通电容笔并不具备苹果Pencil特有的重力压感，而仅仅是一种倾斜的压感。不过，其在其它方面的表现也很出色，与Apple Pencil相似，而且价格仅为200元。现在&…...
关于onnx 转ncnn 的问题
文章目录修改模型Detect层设计转换后处理优质文章由于有些操作是没法支持的 如5维的操作： Unsupported slice axes ! Unsupported slice axes ! Unsupported slice axes ! Unsupported slice axes ! Unsupported slice axes ! Unsupported slice axes !参考&#…...
设计模式之《责任链模式》
------《责任链模式》责任链模式的概念为什么用责任链模式工作中用在哪里设计思路代码实现总结责任链模式的概念 责任链模式是一种行为型设计模式，它允许你将请求沿着处理链传递，直到有一个处理者能够处理该请求为止。 在责任链模式中，每个…...
Android Studio实现多功能日记本
项目目录一、项目概述二、系统特点三、开发环境四、详细设计1、E-R图2、数据库3、系统设置五、运行演示一、项目概述 本次实现了功能实用且齐全的日记本，界面友好，使用便捷，采用MVC架构设计。使用SQLite数据库存储数据，数据表有主…...
只依赖Tensorrt和opencv的yolov5源代码
simple_yolo.hpp #ifndef SIMPLE_YOLO_HPP #define SIMPLE_YOLO_HPP/*简单的yolo接口，容易集成但是高性能 */#include <vector> #include <memory> #include <string> #include <future> #include <opencv2/opencv.hpp>namespace Si…...
多路I/O转接 poll（了解）
poll() 的机制与 select() 类似，与 select() 在本质上没有多大差别，管理多个描述符也是进行轮询，根据描述符的状态进行处理，但是 poll() 没有最大文件描述符数量的限制（但是数量过大后性能也是会下降）。 p…...
听说你也在为配置tomcat server而烦恼，看我这一篇，让你醍醐灌顶！
一.通过maven创建项目 二.下载tomcat服务器 我们一般在tomcat官网中进行tomcat的下载 Apache Tomcat - Welcome! 三.添加配置：我们点击下图中的文件配置 四.测试配置的tomcat 我们在文件的body中输入 测试内容： 在控制台中显式tomcat运行的信息&#…...
【从零开始学Skynet】工具篇（二）：虚拟机文件的复制粘贴
大家在Linux系统下开发的时候肯定会遇到虚拟机与主机间无法复制粘贴的问题，现在我们就来解决这样的问题，方便我们的开发。 1、打开设置 我们可以系统界面的菜单栏点击“控制”，然后打开“设置”； 也可以在VirtualBox界面打开“设…...
全球自动驾驶竞争力最新排行榜，4家中国企业上榜
发展至今，自动驾驶技术不仅是汽车行业的一个主战场，更是全球科技领域中备受关注和充满竞争的一个重要领域。近年来，各大汽车制造商和科技公司都在投入大量财力物力人力进行自动驾驶技术的研发，并进一步争夺市场份额。 当然&#…...
APP启动流程分析
1、要分析的问题 1、与正常trace比对，确认过耗时在哪个步骤（am create/pause/stop/start/doframe)？ 2、与正常trace比对，确认过耗时在哪个cpu state(Running/Runnable/Sleep/Uninterruptible Sleep)？ 2、启动分析 …...
IIR数字滤波器简介与实现
一、简介： IIR是一种数字滤波器，其输出是输入信号和过去输出的某些加权和。IIR滤波器由反馈和前馈组成，可以用于滤除或增强信号的特定频率成分。 IIR滤波器的输出表示为： y[n] b0 * x[n] b1 * x[n-1] b2 * x[n-2] … - a1 * …...
3.5 函数的极值与最大值和最小值
学习目标： 我要学习函数的极值、最大值和最小值，我会采取以下几个步骤： 理解基本概念：首先，我会理解函数的极值、最大值和最小值的概念。例如，我会学习函数在特定区间内的最高点和最低点，并且理…...
第五十八天打卡
第五十八天打卡 739. 每日温度 提示 中等 1.5K company 亚马逊 company Facebook company 字节跳动 给定一个整数数组 temperatures ，表示每天的温度，返回一个数组 answer ，其中 answer[i] 是指对于第 i 天，下一个更高温度出现在…...
双一流大学计算机专业月薪拿2000？网友：我裂开
**“计算机不行了”“求求不要再学计算机”……**这样的言论时不时就会在网上掀起一番热议，知了姐看得不少。尤其最近有则新闻，更是给计算机专业盖上“不值钱”的帽子。 某985、211大学校招会上，有企业招聘计算机相关岗位时，提出…...
ChatGPT的“N宗罪”？｜AI百态（上篇）
序： AI诞生伊始，那是人人欣喜若狂的科技曙光，深埋于哲学、想象和虚构中的古老的梦，终于成真，一个个肉眼可见的智能机器人，在复刻、模仿和服务着他们的造物主——人类。 但科技树的点亮，总会遇到…...
48.现有移动端开源框架及其特点—MDL（mobile-deep-learning）
48.1 功能特点 一键部署，脚本参数就可以切换ios或者android支持iOS gpu运行MobileNet、squeezenet模型已经测试过可以稳定运行MobileNet、GoogLeNet v1、squeezenet、ResNet-50模型体积极小，无任何第三方依赖。纯手工打造。提供量化函数，对32位float转8位uint直接支持，模型…...
4.9--计算机网络之TCP篇之TCP Keepalive 和 HTTP Keep-Alive --（复习＋大总结）---沉淀ing
HTTP 的 Keep-Alive，是由应用层（用户态） 实现的，称为 HTTP 长连接； TCP 的 Keepalive，是由 TCP 层（内核态） 实现的，称为 TCP 保活机制 HTTP 的 Keep-Alive HTTP 是基于…...
qt完善登录界面（2023-4-6）
点击登录按钮后，判断账号和密码是否一致，如果匹配失败，则弹出错误对话框，文本内容“账号密码不匹配，是否重新登录”，给定两个按钮ok和cancel，点击ok后，会清除密码框中的内容…...
104.（cesium篇）cesium卫星轨道模拟
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
【C++进阶篇】智能指针
C内存管理终极指南：智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
springboot 日志类切面，接口成功记录日志，失败不记录
springboot 日志类切面，接口成功记录日志，失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
云安全与网络安全：核心区别与协同作用解析
在数字化转型的浪潮中，云安全与网络安全作为信息安全的两大支柱，常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异，并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全：聚焦于保…...
【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！
【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！ 🌱 前言：一棵树的浪漫，从数组开始说起 程序员的世界里，数组是最常见的基本结构之一，几乎每种语言、每种算法都少不了它。可你有没有想过，一组看似“线性排列”的有序数组，竟然可以**“长”成一棵平衡的二…...
Qt Quick Controls模块功能及架构
Qt Quick Controls是Qt Quick的一个附加模块，提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中，这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构，与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...
从0开始学习R语言--Day17--Cox回归
Cox回归 在用医疗数据作分析时，最常见的是去预测某类病的患者的死亡率或预测他们的结局。但是我们得到的病人数据，往往会有很多的协变量，即使我们通过计算来减少指标对结果的影响，我们的数据中依然会有很多的协变量，且…...
TI德州仪器TPS3103K33DBVR低功耗电压监控器IC电源管理芯片详细解析
1. 基本介绍 TPS3103K33DBVR 是 德州仪器（Texas Instruments, TI） 推出的一款 低功耗电压监控器（Supervisor IC），属于 电源管理芯片（PMIC） 类别，主要用于 系统复位和电压监测。 2. …...