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环境,就解决了。

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

相关推荐
IT_陈寒14 分钟前
JavaScript开发者必知的5个性能杀手,你踩了几个坑?
前端·人工智能·后端
跟着珅聪学java17 分钟前
Electron 精美菜单设计
运维·前端·数据库
日光倾18 分钟前
【Vue.js 入门笔记】闭包和对象引用
前端·vue.js·笔记
EstherNi20 分钟前
左右两侧定位的效果,vue3
javascript·vue.js
一只程序熊24 分钟前
UniappX 未找到 “video“ 组件,已自动当做 “view“ 组件处理。请确保代码正确,或重新生成自定义基座后再试。
前端
林小帅26 分钟前
【笔记】xxx 技术分享文档模板
前端
雾岛心情31 分钟前
【HTML&CSS】HTML为文字添加格式和内容
前端·css·html
心.c39 分钟前
如何在项目中减少 XSS 攻击
前端·xss
Rsun045511 小时前
Vue相关面试题
前端·javascript·vue.js
TON_G-T1 小时前
前端包管理器(npm、yarn、pnpm)
前端