canvas导出绘制图片canvas.toDataURL()报错

canvas绘制图片后,想导出图片,用canvas.toDataURL获取,发现打印不出数据,还报错。

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

at img.onload

代码:

// 可以将 canvas 的内容导出为图片

const dataURL = canvas.toDataURL('image/png');

一直想了很久,查资料,这代码也没有错啊。

最后让我找到答案。不是代码问题,是环境问题。

答案:这个问题因为是基于file:// 进行调试的,而chrome做了安全相关的处理,主要是HTML5安全的CORS(跨域资源共享)的安全限制,造成出现这样的提示,如果你需要在自己的电脑上调试的话,只需要本地搭建一个服务器环境就可以了。

前面我一直是本地进行的所以一直报错,现在我搬到PHP环境,就解决了。

效果图:可以打印出来图片了。

相关推荐
web小白成长日记12 小时前
企业级 Vue3 + Element Plus 主题定制架构:从“能用”到“好用”的进阶之路
前端·架构
APIshop12 小时前
Python 爬虫获取 item_get_web —— 淘宝商品 SKU、详情图、券后价全流程解析
前端·爬虫·python
风送雨12 小时前
FastMCP 2.0 服务端开发教学文档(下)
服务器·前端·网络·人工智能·python·ai
XTTX11012 小时前
Vue3+Cesium教程(36)--动态设置降雨效果
前端·javascript·vue.js
LYFlied13 小时前
WebGPU与浏览器边缘智能:开启去中心化AI新纪元
前端·人工智能·大模型·去中心化·区块链
Setsuna_F_Seiei13 小时前
2025 年度总结:人生重要阶段的一年
前端·程序员·年终总结
model200514 小时前
alibaba linux3 系统盘网站迁移数据盘
java·服务器·前端
han_15 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
前端·javascript·面试
aPurpleBerry15 小时前
React 01 目录结构、tsx 语法
前端·react.js
jayaccc15 小时前
微前端架构实战全解析
前端·架构