fabric 使用网络URL导致toData导出出现跨域问题

原创

于 2020-05-27 00:04:32 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fabricjs #html #javascript

本文探讨了在使用Fabric.js时遇到的跨域图片加载问题，详细解析了问题原因及两种解决方案：一是将图片转换为base64编码，二是利用Fabric.js的crossOrigin属性设置。文章深入介绍了如何通过修改图片加载方式避免跨域错误，确保图片能在canvas中正确显示。

问题描述

使用farbic.image生产图片的时候，需要将canvas导出成图片出现跨域问题
在这里插入图片描述

分析

这是由于canvas导出toDataURL不允许引用跨域的图片，所以出现报错。
通过阅读源码，发现其实fabric加载图片的时候是通过创建img标签来下载图片数据，所以只需要在img标签设置允许跨域即可解决这个问题。

img.crossOrigin = 'anonymous'

解决方案

第一种：把图片转为base64

案例：

let base64 = ''// 服务器传输base64代替url路径
let arr = base64.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8Arr=new Uint8Array(n

最低0.47元/天解锁文章