JavaScript：获取没有画布的ImageData [英] JavaScript: getting ImageData without canvas

问题描述

可以从一个图像中获取一个ImageData对象，该图像不在画布上，而是在DOM树中的其他位置作为正常< img> ？

如果是，如何？

解决方案

画布，然后在此画布上绘制图像：

  var canvas = document.createElement（'canvas'）; 
 var context = canvas.getContext（'2d'）; 
 var img = document.getElementById（'myimg'）; 
 canvas.width = img.width; 
 canvas.height = img.height; 
 context.drawImage（img，0，0）; 
 var myData = context.getImageData（0，0，img.width，img.height）; 
  

但如果图片来自其他网域，则无效。这是一个安全限制，你不能得到周围，如果你没有控制服务器（小心，如​​果你打开你的html文件与file：//你会有很多额外的限制，使用http：//）

Is it possible to get an ImageData Object from an image which is not on the canvas but somewhere else in the DOM tree as a normal <img> ?

If yes, how?

解决方案

You have to create an in memory canvas and then draw on this canvas the image :

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myimg');
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0 );
var myData = context.getImageData(0, 0, img.width, img.height);

But this won't work if the image comes from another domain. This is a security restriction you can't get around if you have no control of the server (be careful that if you open your html file with file:// you'll have a lot of additional restrictions, use http://)

这篇关于JavaScript：获取没有画布的ImageData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！