canvas图片绘制跨域问题解决方案Tainted canvases may not be exported

2018-04-19 admin

图片跨域问题的一般解决方法

当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下,确实可用。 看下面的一个例子: html代码:

<canvas id="canvas" style="display: none"></canvas>
<img id="canvasImg" />

javascript代码:

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height + 200;
    ctx.drawImage(img, 0, 0);
      document.getElementById('canvasImg').src = canvas.toDataURL("image/jpeg", 1);
    }
img.src = 'http://img.hb.aicdn.com/38d8f519b3f464a80d85ed9632fed904ed0181f41d632-ZHrigO_fw658';

这样就可以正常画出图片了。

微信图片的问题

但是我发现这个方法用于绘制微信头像的时候有概率会出现问题,当然了这里面指的是将图片的网络地址直接赋值给图片的src。【之所以说有概率会出现问题是因为我通过上面的方法去完成需求的时候并没有画出头像(微信头像放在wx.qlogo.cn域名下,然而我今天准备写这篇文章的时候突然就可以了,见鬼 当时的时候我们找了很多方法,发现,在头像url后面加上时间戳的话就可以了【emmm神操作 即:

img.src = 'http://wx.qlogo.cn/mmopen/vi_32/RnLIHfXibgFHlticiclzflpriaLsC3TS9b2Sbj05Wh3vGlhcFutt18dfkXGUt8x11e4q2KHlX4EHHaBb6XylLQW1kQ/0?timeStamp='+new Date();

其他的解法

今天找了个新的方法去解决canvas图片跨域的问题: 将文件读入到blob文件对象,然后使用URL.createObjectURL转换成src可用的地址

//直接读成blob文件对象
function getImageBlob (url, cb) {
   var xhr = new XMLHttpRequest();
   xhr.open('get', url, true);
   xhr.responseType = 'blob';
   xhr.onload = function () {
     if (this.status == 200) {
       imgResponse = this.response;
       //这里面可以直接通过URL的api将其转换,然后赋值给img.src
       //也可以使用下面的preView方法将其转换成base64之后再赋值
       img.src = URL.createObjectURL(this.response);
     }
    };
    xhr.send();
  }
  //这里面将blob转换成base64
  function preView (url) {
    let reader = new FileReader();
    getImageBlob(url, function (blob) {
       reader.readAsDataURL(blob);
    });
    reader.onload = function (e) {
      console.log(e.loaded)
    }
  }
  img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height + 200;
    ctx.drawImage(img, 0, 0);
    document.getElementById('canvasImg').src = canvas.toDataURL("image/jpeg", 1);
  }
  var imgResponse = '';
 getImageBlob('http://wx.qlogo.cn/mmopen/vi_32/RnLIHfXibgFHlticiclzflpriaLsC3TS9b2Sbj05Wh3vGlhcFutt18dfkXGUt8x11e4q2KHlX4EHHaBb6XylLQW1kQ/0');

[转载]原文链接:https://segmentfault.com/a/1190000014478087

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-29255.html

文章标题:canvas图片绘制跨域问题解决方案Tainted canvases may not be exported

相关文章
JS动态修改图片的URL(src)的方法
本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 &lt;!DOCTYPE html&gt; &lt;...
2017-03-22
2015年4月TIOBE编程语言排行榜 JavaScript排第六位
IOBE近日发布2015年4月编程语言排行榜,前三名终于发生变化,Objective-C退出前三掉落第四位,C++势头勇猛上升4位冲进前三,Java更是一举大力夺得第一,而最让人兴奋的是JavaScript连冲9位,雄踞第六位! ...
2015-11-12
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
YouTube抛弃Flash,将HTML5视频设为默认
YouTube在今天宣布,它终于停止继续使用Adobe Flash作为默认设置了。YouTube网站现在将在Google Chrome、微软的IE 11、苹果的Safari 8浏览器,以及Mozilla的Firefox浏览器的测试版中使用H...
2015-11-12
前端单页应用微服务化解决方案2 - Single-SPA
技术选型 经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各...
2018-09-07
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
webpack的proxyTable无效的解决方案
最近遇到这个需要单页访问跨域后台的问题。 遇到了网上很多人说的,proxyTable无论如何修改,都没效果的现象。 经过几轮测试,总结出一下几种解决方案: 1.(非常重要)确保proxyTable配置的地址能访问,因为如果不能访问,在浏览器...
2018-06-15
javascript控制图片播放的实现代码
一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了,兼容ie、firefox和google浏览器。 分享代码如下: &lt;!DOCTYPE ...
2017-03-29
使用canvas及js简单生成验证码方法
在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是: 1.生成一张画布canvas 2.生成随机数验证码  3.在画布中生成干扰线  4.把验证码文本填充到画布中  5.点击画布更换验证码 结构...
2017-04-05
回到顶部