getimagedata

问题 A client required help with a program that extracts the dominant color of a product image. I was able to quickly implement this in Javascript; the algorithm below only samples the central square of a 3x3 grid on the image for a quick estimate of the t-shirt color in the image. var image = new Image(); image.onload = function() { try { // get dominant color by sampling the central square of a 3x3 grid on image var dominantColor = getDominantColor(); // output color $("#output").html

问题 Providing you have an array of colors and you want to fill a canvas with its content, the fastest way I'm aware of is: var my_array = /* already have it */; var img_data = ctx.createImageData(canvas.width, canvas.height); for (var i=0; i<canvas.width*canvas.height; ++i) img_data[i] = my_array[i]; ctx.putImageData(img_data,0,0); This seems too slow as I'm copying the entire array twice! One to make the img_data and another to put it on the canvas. Isn't there a way to simply plug the original

问题 I have a Tumblr theme that includes a canvas script. The Cross-Origin Resource Sharing policy doesn't allow context.getImageData() to work. Script is located at user.tumblr.com , images are located at static.tumblr.com . Is there any solution for this? Thank you! 回答1: document.domain will be your friend there. I haven't studied the canvas security model closely, but if it follows the rest of Javascript, setting document.domain = tumblr.com might help. (Googling for document.domain canvas may

问题 I'm looking to allow users to slice an existing canvas into two canvases in whatever direction they would like. I know how to allow the user to draw a line and I also know how to copy the image data of one canvas onto two new ones, but how can I copy only the relevant color data on either side of the user-drawn line to its respective canvas? For example, in the following demo I'd like the canvas to be "cut" where the white line is: const canvas = document.querySelector("canvas"), ctx = canvas

问题 There's a 3x3 image. The CanvasPixelArray is: [12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255] I change the alpha of all pixels to 0 and back by: bobs = this.gfx.getImageData(0,0,3,3).data for (a=3;a<bobs.data.length;a+=4) bobs.data[a] = 0 this.gfx.putImageData(bobs,0,0) bobs = this.gfx.getImageData(0,0,3,3).data for (a=3;a<bobs.data.length;a+=4) bobs.data[a] = 255 this.gfx.putImageData(bobs,0,0) All pixels became black.

问题 I'm trying to do some image processing on external images using Pixastic. I know that I need to use $.getImageData to do operations on external images because otherwise you'll get DOM Exception 18 due to the canvas being "tainted by cross-origin data". Unfortunately, the appspot service "img-to-json" that $.getImageData uses is down with a "503 Over Quota" error, and has been for several days. I found another service called "img2json" that was actually working yesterday for a bit, but I'm not

问题 I'm trying to output the pixel values from an image. The image is loading correctly; another answer on here suggested that the browswer is trying to read the pixels before the image is finished loading, but I can see that it's loaded by the time the alert() fires. function initContext(canvasID, contextType) { var canvas = document.getElementById(canvasID); var context = canvas.getContext(contextType); return context; } function loadImage(imageSource, context) { var imageObj = new Image();

问题 I'm trying to develop an application that will use getImageData in javascript in Firefox 3, but I am getting a " NS_ERROR_DOM_SECURITY_ERR " on the getImageData call. The javascript and the image are both currently being served from by hard drive, which is apparently a security violation? When this is live they will both be served from the same domain, so it won't be a problem, but how can I develop in the meantime? 回答1: You could try installing a local webserver such as Apache (on unix) or

问题 Is it somehow possible to convert an byte array to image data without using canvas? I use currently something like this, however I think that can be done without canvas, or am I wrong? var canvas = document.getElementsByTagName("canvas")[0]; var ctx = canvas.getContext("2d"); var byteArray = [ 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, // red 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, // green 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255 // blue ]; var imageData = ctx.getImageData

问题 Hello dear community. I'm trying to create extract colors from images fetched from Flickr. That all works really great to the point when I try to process that images in canvas with getImageData(). As described through WHATWG loading an image into canvas set a flag so you cannot maniplate that. So my question is does FLICKR support CORS? <script type="text/javascript"> var img= new Image; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var src = "fetched