大家好,我是vue-fabric-editor开源图片编辑器项目的作者,很多开发者都会问我图片跨域的问题如何处理,今天就详细的跟大家分享一下fabric.js图片跨域怎么处理。问题现象会报两种错误,要么保存新图片时报错,要么插入图片时报错:图片插入到画布成功了,画布保存新图片时报错。图片无法插入到画布,直接提示CORS报错。先说结论:必须后端设置跨域,然后前端也设置跨越,才能正常将图片插入画布,并保存为新图片。跨域的设置跨域区分前端跨域与后端跨域设置,我通过http-server模拟跨域,8080下的HTML文件 访问8081的图片,测试视频,得出如下结果:都不设置跨域:渲染正常,保存不正常。仅前端设置跨域:渲染不正常。仅后端设置跨域:渲染正常,保存不正常。前后端均设置跨域:渲染正常,保存正常。4种插入图片的方式fabric.js 提供了多种插入图片的方式,主要流程都是将原生的Img对象转换成fabric.Image对象,然后插入到画布中。fabric.Image.fromURL:通过回调直接返回fabric的img对象,直接插入到画布中。fabric.util.loadImage:通过回调返回原生img对象,转换为fabric对象后插入画布中。new Image()与document.createElement('img'):创建原生img对象,转换为fabric对象后插入画布中
...
继续阅读
(87)