canvas.toDataURL,canvas dataurl
错误报告的详细信息
未捕获的DOMException:未能对“HTMLCanvasElement”执行“toDataURL”:受污染的画布可能无法导出。
关键字
canvas . toda taurl()cross Origin Access-Control-Allow-Origin前言
最近在做一个创意构图工具。大概齐琦就是一个类似的通过拼接自定义文字和图片信息生成商品图片的功能。项目中使用了绘图板库fabric.js。在最后一步中，我在保存图片时报告了一长串错误。我翻遍了墙内外，给出的解决方案都不全面。为了避免同学再次踩坑，我有这篇文章。
正文
当我们convertDOM2Image时，如果DOM中有图片资源，而资源所在的web-server不支持跨域，保存图片就不会成功。
因此，在排除故障时，我们必须首先确定
web服务器是否允许跨域？我们以nginx为例。access-control-allow-orgin:xxxx(可以是*，如果有更高的安全要求，可以根据主域名定制)应该存在于response-header中。如果是img标签，是否添加crossorigin=anonymous ？如果是图像对象，是否也添加修改后的属性obj.crossOrigin=anonymous ？如果不行，就不要把答案放在这里。先来看栗子。在接下来的栗子中，我们将使用将图像转换为画布对象的方法。
函数ConvertImageTocanvas(image){//创建一个画布DOM元素，并设置其宽度和高度与图片let canvas=document . createelement( canvas )的宽度和高度相同；画布.宽度=图像.宽度；canvas . height=image . height；canvas.getContext(2d )。drawImage(image，0，0)；//在实际开发中，我们需要将抓取的base64图片代码传输到后台图片服务器，后台图片服务器会直接存储或生成一张图片；//所以会用toda taurlconsole . log(canvas . toda taurl( image/JPEG ))返回canvas}栗子1
未设置本地跨域权限选项crossorigin=anonymous，并且web服务器未设置跨域权限选项。
div id= D1 img style= width:300 px；高度：240像素；src= 3358jb51.net/images/cover _缩略图_ 3rd.jpg alt=跨域权限选项crossorigin=anonymous未在本地设置，跨域权限选项/p/div button onclick= set canvas( D1 ) canvas save/button function set canvas(domid){ letimg=document . getelementbyid(domid)。query selector( img )document . body . appendchild(convertimagetocanvas(img))}显然，报告了一个错误。
栗子2
跨域权限选项在本地标签中设置，但在web服务器中未设置。
这次连图都拿不出来，报错就好。
很好理解。受到浏览器同源策略的限制。
从原点“null”访问位于“xxxx”的映像(从“xxxx”重定向)已被CORS策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。
栗子3
未在本地设置跨域权限选项。交叉起源=匿名。Web服务器设置跨域权限选项。
报错，是应该的。
栗子4
在local label=anonymous中设置跨域权限选项，web-server设置跨域权限选项。
div id= D4 img style= width:300 px；高度：240像素；src= 3359 img.alicdn.com/tfs/tb1 _ ut 8 a5 ermejjspixbzlfxa-143-59 . png alt= cross origin= anonymous pLocal设置跨域权限选项crossorigin=anonymous ，Web-server设置跨域权限选项/p/div button onclick= set canvas( D4 ) canvas save/button实际上是可以用的，但是~如果在代码中设置了跨域怎么办？
栗子5
set canvas(domid){ Letimg=document . getelementbyid(domid)。query selector( img )img . cross origin= anonymous document . body . appendchild(convertImageTocanvas(img))}报告错误。
我看了官方文档，意思是必须同步设置crossOrigin=anonymous，这样图像证书才可信。
这意味着，如果从加载文档的同一来源获取图像，将启用CORS并发送凭据。
否则，缓存的图像数据仍然会被canvas视为受污染的跨源内容。
我该怎么办？再拍一遍图片，加个随机数，图片还是那张图片，但是加了个马甲，浏览器就不知道了。
栗子6
函数set canvas(DOMID){ let img=document。getelementbyid(DOMID).查询选择器。src=img。src？数学。random()img。交叉起源=匿名 img。onload=()={ document。身体。appendchild(convertImageToCanvas(img))} } binggo，完美解决
所以我们在开发过程中，新建图片，更换图片，还原图片等功能代码内，最好每一次都加个随机数，以保证源都是最新的，不走缓存
多说一点吧，关于织物。射流研究…的相关跨域配置见下方
let _fabricConfig={//.交叉起源："匿名"};/*织物对象*/let _fabricObj=新结构Canvas(id，_ fabric config)；//新建图片对象时让imgInstance=新面料Image.fromURL(url ？v= Math.random()，img={}，{crossOrigin: anonymous})//动态更新图片时让当前活动=_ fabric实例。getactiveobj()；currentActive.setSrc(randomURL，img={}，{ cross origin:匿名 })github:http://github。com/philllyx
到此这篇关于详解canvas.toDataURL()报错的解决方案全都在这了的文章就介绍到这了，更多相关canvas.toDataURL()报错内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。