canvas.toDataURL()报错的解决方案全都在这了

更新日期: 2019-12-30阅读: 2.7k标签: canvas

报错详尽信息

Uncaught domException: Failed to execute 'toDataURL' on 'htmlCanvasElement': Tainted canvases may not be exported.


前言

最近在做一个创意类的图片合成工具,大概齐就是通过拼接自定义的文字和图片信息生成一张商品图片类似的功能,项目中用到了fabric.js这个画板库,最后一步在保存图片的时候报上面的一长串错误,墙内墙外搜了一遍,给出的解决方案都不全面,为避免同学们再次踩坑,于是有了此文


正文

我们在convertDOM2Image时,如果DOM内存在图片资源,该资源所在的web-server是不支持跨域的,保存图片是不会成功的。

因此在排查问题时,首先要确定

  1. web-server是否允许跨域,我们以nginx为例,response-header内要存在Access-Control-Allow-Orgin:xxxx(可以是*,安全性要求比较高的可以根据主域名自定义)

  2. 如果是img标签, 是否添加了crossorigin="anonymous", 如果是Image对象,同样是否添加了改属性obj.crossOrigin='anonymous'

  3. 如果还不行,这里先不把答案放出来,我们先看看栗子


在接下来的栗子中我们会用到将Image转换为canvas对象的方法

  function convertImageToCanvas(image) {
    // 创建canvas DOM元素,并设置其宽高和图片一样   
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    // 我们在实际的开发中,需要将抓换后的base64图片编码传输到后台图片服务器,由server直接存储或者生成一张图片;
    // 所以会用到 toDataURL
    console.log(canvas.toDataURL('image/jpeg'))
    return canvas;
  }

栗子1

本地未设置跨域允许选项crossorigin=anonymous,web-server未设置跨域允许选项

  <div id="d1">
    <img style="width: 300px;height: 240px;" src="http://es6.ruanyifeng.com/images/cover_thumbnail_3rd.jpg" alt="">
    <p>本地未设置跨域允许选项crossorigin=anonymous,web-server未设置跨域允许选项</p>
  </div>
  <button onclick="setCanvas('d1')">canvas保存</button>
    function setCanvas(DOMID) {
      let img = document.getElementById(DOMID).querySelector('img')
        document.body.appendChild(convertImageToCanvas(img))
    }

很显然,报错


栗子2

本地标签内设置跨域允许选项, web-server未设置跨域允许选项

这次连图片都出不来,直接报错

这个好理解,浏览器同源策略限制嘛

Access to image at 'xxxx' (redirected from 'xxxx') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


栗子3

本地未设置跨域允许选项crossorigin=anonymous, web-server设置跨域允许选项

报错,妥妥的。


栗子4

本地标签内设置跨域允许选项crossorigin=anonymous, web-server设置跨域允许选项

<div id="d4">
   <img style="width: 300px;height: 240px;" src="https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png" alt="" crossorigin="anonymous">
   <p>本地设置跨域允许选项`crossorigin=anonymous`,`web-server`设置跨域允许选项</p>
</div>
<button onclick="setCanvas('d4')">canvas保存</button>

居然可以了,但是~如果在代码内设置跨域呢?


栗子5

  function setCanvas(DOMID) {
    let img = document.getElementById(DOMID).querySelector('img')
    
    img.crossOrigin= 'anonymous'
    
    document.body.appendChild(convertImageToCanvas(img))
  }

报错
我看官方文档的意思是必须同步设置crossOrigin=anonymous,该图片凭证才会被信任

This means that CORS is enabled and credentials are sent if the image is fetched from the same origin from which the document was loaded.

否则缓存的图像数据仍然会被画布视为有污染的跨源内容.

怎么办?重新取一遍图片呗,加个随机数,图片还是那个图片,不过加了个马甲,浏览器就不认识了


栗子6

  function setCanvas(DOMID) {
    let img = document.getElementById(DOMID).querySelector('img')
    
    img.src =img.src+'?v='+Math.random()
    img.crossOrigin= 'anonymous'
    
    img.onload=()=>{
      document.body.appendChild(convertImageToCanvas(img))
    }
  }

binggo, 完美解决

所以我们在开发过程中,新建图片,更换图片,还原图片等功能代码内,最好每一次都加个随机数,以保证源都是最新的,不走缓存


多说一点吧,关于fabric.js的相关跨域配置见下方

    let _fabricConfig = {
        // ....
        crossOrigin:'anonymous'
    };
    /* fabric对象 */
    let _fabricObj = new fabric.Canvas(id, _fabricConfig);


    // 新建图片对象时
    let imgInstance = new fabric.Image.fromURL(url + '?v='+ Math.random(), img => {}, {crossOrigin: 'anonymous'})
    
    // 动态更新图片时
    let currentActive = _fabricInstance.getActiveObj();
    currentActive.setSrc(randomURL, img =>{}, {crossOrigin: 'anonymous'})

链接: https://fly63.com/article/detial/8477

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。

原生js使用canvas实现图片格式webp/png/jpeg在线转换

javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。

离屏Canvas — 使用Web Worker提高你的Canvas运行速度

现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力

js用canvas实现简单的粒子运动

在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察

Canvas 点线动画案例

canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径

Canvas在移动端绘制模糊的原因与解决办法

由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!