fabricJs中给canvas添加跨域背景图片报错Tainted canvases may not be exported

最近几期我想分享一下我的项目中使用vue+fabric.js过程中遇到的坑。

就比如给canvas加背景时，就会出现跨域的报错提示。

我用的是vue-element相关框架，在此不多做赘述，后面再出专题讲我的前端架构。

vue的methods:{}方法中写入：

getURLBase64(url) {  //将远程图片下载本地成为base64图片let _this = this;return new Promise((resolve, reject) => {var xhr = new XMLHttpRequest()xhr.open('get', url, true)xhr.responseType = 'blob'xhr.onload = function() {if (this.status === 200) {var blob = this.responsevar fileReader = new FileReader()fileReader.onloadend = function(e) {var result = e.target.result;//console.log(result)_this.imageUrl = result;resolve(result)};fileReader.readAsDataURL(blob)}};xhr.onerror = function() {reject()};xhr.send()})
},

在调用的地方如下：

let bgUrl =  url;
let _this = this;_this.getURLBase64(bgUrl);                             //将远程图片URL转成本地Base64var img = new Image();
img.setAttribute("crossOrigin",'Anonymous');
img.src = bgUrl;
img.onload = function () {                                       //图片获取宽高console.log(img.width,img.height);_this.bgWidth = img.width;_this.bgHeight = img.height;_this.$refs.canvasshelf.canvas.setWidth(_this.bgWidth); //给画布设置图片宽高_this.$refs.canvasshelf.canvas.setHeight(_this.bgHeight);_this.$nextTick(() => {_this.$refs.canvasshelf.renderAll()});_this.$refs.canvasshelf.setbackground('#fff');let canvas =  _this.$refs.canvasshelf.canvas;//给画布设置背景图片canvas.setBackgroundImage(_this.imageUrl, canvas.renderAll.bind(canvas), {opacity: 1,angle: 0,left: 0,top: 0,originX: 'left',originY: 'top'});
}

以上算是个伪代码，看一个思路，方便以后遇到相同问题，想起来解决方案！~

fabricJs中给canvas添加跨域背景图片报错Tainted canvases may not be exported相关推荐

cesium中的billboard加载在线图片报错Tainted canvases may not be loaded
加载项目中的图片没有问题,加载在线图片的时候就会报错解决方法: image.setAttribute('crossOrigin', 'anonymous'); 原因:canvas 绘制的时候在线图片 ...
使用canvas截图跨域导致的报错（Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement）
使用跨域图片绘制会污染canvas画布,导致无法导出canvas数据,转化成图片解决办法:通过设置crossOrigin来解决 let video = document.createElement( ...
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...
Access-Control-Allow-Origin跨域问题的报错以及解决
Access-Control-Allow-Origin跨域问题的报错以及解决这是浏览器控制台报错详情,在前后端分离,前段需要传数据进入后端时报的错解决方案:配置跨域过滤器 1.先复制以下代码(过滤 ...
Vue3解决跨域问题，报错Access-Control-Allow-Origin
Vue3解决跨域问题Access to XMLHttpRequest at 'https://www.runoob.com//try/ajax/json_demo.json' from origin ...
一行代码解决Vue跨域请求Vue报错:AxiosError
这种错误一般情况下都是域名错误或者跨域权限不够,也就是我们常说的"网络请求跨域错误" 我们首先是核实一下域名是否正确,如果域名正确没有输入错误那就是跨域权限问题了,那我们如何解决呐 ...
HTML页面跨域请求图片资源报错：Failed to load resource: the server responded with a status of 403 (Forbidden)
笔者近日刚刚完成了一个Spring boot项目,首页 index.html 页面元素 <img> 引用了第三方服务器的图片链接,在本地测试环境输入 http://localhost 或者 ...
Vue中利用canvas添加炫动背景
1.展示页面 <template><div id="main"><canvas id="myCanvas" style=" ...
Canvas - 错误：Tainted canvases may not be exported
记录日期:2019年6月26日 22点21分 Canvas 的内容保存为图片,但是一直不成功.报错信息如标题,意思指被污染的画布不能被导出. 理论上来讲,导出为图片是一定可行的,但是被污染的画布是不允 ...

fabricJs中给canvas添加跨域背景图片报错Tainted canvases may not be exported

fabricJs中给canvas添加跨域背景图片报错Tainted canvases may not be exported相关推荐

最新文章

热门文章