8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

CanvasContext2D drawImage() 问题 [onload 和 CORS]

PrabDev 1月前

40 0

我试图在获取其 dataURL() 之前在画布上绘制图像,但返回的数据为空。当我在控制台中检查时,我看到字符串中有很多 A : (\'data:image/...

我试图在获取图像之前在画布上绘制图像 dataURL() ,但返回的数据是空的。

字符串中 A 有很多 "data:image/png;base64,iVBO..some random chars... bQhfoAAAAAAAAAA... a lot of A ...AAAASUVORK5CYII=" )

当我尝试将画布附加到文档时,也没有绘制任何内容,并且控制台中也没有抛出任何错误。

这里有什么问题?

这是我的代码:

var img = new Image();
img.src = "http://somerandomWebsite/picture.png";
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0,0); // this doesn't seem to work
var dataURL = canvas.toDataURL(); // this will give me a lot of "A"    
doSomething(dataURL);

此外,在进行快速刷新时,图像会正确地绘制到画布上,但控制台中出现错误消息并且 dataURL 为空。

Firefox 中的消息是: \'SecurityError:该操作不安全。\' ,
在 Chrome 中它是 \'未捕获的 SecurityError:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布。\' ,
在 IE 上我只得到 \'SecurityError\' .

这是什么意思 ?

帖子版权声明 1、本帖标题:CanvasContext2D drawImage() 问题 [onload 和 CORS]
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由PrabDev在本站《sockets》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 您必须等待图像加载完毕才能在画布上绘制它。

    为此,只需使用 load 的事件处理 <img>

    // create a new image
    var img = new Image();
    // declare a function to call once the image has loaded
    img.onload = function(){
      var canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      var context = canvas.getContext('2d');
      context.drawImage(img, 0,0);
      var dataURL = canvas.toDataURL();
      // now you can do something with the dataURL
      doSomething(dataURL);
    }
    // now set the image's src
    img.src = "http://somerandomWebsite/picture.png";
    

    此外,为了使画布 context.toDataURL() 正常 context.getImageData 工作,您必须以 跨域兼容的方式 ,否则画布将被“污染”,这意味着任何获取像素数据的方法都将被阻止。

    • 如果您的图像来自同一台 服务器 ,则没有问题。
    • 如果你的图片是由 外部服务器 ,请确保它允许你在跨域标头中使用图片, img.crossOrigin 并将 "use-credentials" .
    • 如果 服务器 允许匿名请求,你可以将其设置 img.crossOrigin "anonymous" .

    注意 CORS 标头由服务器发送 ,该 cross-origin 服务器 未正确设置, 则无法规避它
    一些 UserAgents(IE 和 Safari)也还没有实现此属性。

    边缘情况 :如果您的某些图像来自您的服务器,而某些图像来自符合 CORS 的服务器,那么您可能需要使用 onerror 在非 CORS 服务器上 cross-origin 属性 "anonymous" ,该事件处理程序将触发

    function corsError(){
      this.crossOrigin='';
      this.src='';
      this.removeEventListener('error', corsError, false);
    } 
    img.addEventListener('error', corsError, false);
    
返回
作者最近主题: