¿Es posible consultar un objeto HTML Canvas para obtener el color en una ubicación específica?getPixel from HTML Canvas?
Respuesta
Hay una sección sobre pixel manipulation en la documentación del W3C.
Aquí es an example on how to invert an image:
// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;
// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = 255 - pix[i ]; // red
pix[i+1] = 255 - pix[i+1]; // green
pix[i+2] = 255 - pix[i+2]; // blue
// i+3 is alpha (the fourth element)
}
// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);
Sí, echa un vistazo a getImageData(). He aquí un ejemplo de romper código de imagen con JavaScript usando la lona:
¿Has probado el método getImageData?
data = context.getImageData(x, y, 1, 1).data;
color = new Color([data[0], data[1], data[2]]);
Tenga en cuenta que getImageData devuelve una instantánea. Implicaciones son:
- cambios no teniendo efecto hasta la posterior putImageData
- getImageData y putImageData llamadas son relativamente lentos
Sí seguro, siempre y cuando tenga su contexto. How to get canvas context?
var imgData = context.getImageData(0,0,canvas.width,canvas.height);
// array [r,g,b,a,r,g,b,a,r,g,..]
function getPixel(imgData, index) {
var i = index*4, d = imgData.data;
return [d[i],d[i+1],d[i+2],d[i+3]] // returns array [R,G,B,A]
}
// AND/OR
function getPixelXY(imgData, x, y) {
return getPixel(imgData, y*imgData.width+x);
}
¡Yay! Gracias funciona muy bien y es más rápido que llamar a 'context.getImageData (x, y, 1, 1);' – adelriosantiago
Sí, es 10 veces más rápido: [jsbench] (http://jsben.ch/#/zPZ4e) – Dantevg
// Get pixel data
var imageData = context.getImageData(x, y, width, height);
//color at (x,y) position
var color = [];
color['red'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 0];
color['green'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 1];
color['blue'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 2];
color['alpha'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 3];
function GetPixel(x, y)
{
var p = ctx.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
return hex;
}
function rgbToHex(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
- 1. HTML Canvas Tracing
- 2. HTML Canvas Unit testing
- 3. ALPHA_8 bitmaps y getPixel
- 4. HTML Canvas Interval vs RequestAnimationFrame
- 5. Strip html from string Ruby on Rails
- 6. HTML canvas drawImage con un ángulo
- 7. Diferencia entre GetPixel y Canvas.Píxeles en Delphi
- 8. ¿Cómo puedo realizar el relleno de inundación con HTML Canvas?
- 9. Uso del dispatchDraw (Canvas canvas)
- 10. Strip HTML from string en SSRS 2005 (VB.NET)
- 11. Firefox lanzando una excepción con HTML Canvas putImageData
- 12. ¿Por qué HTML Canvas redondea lineCap para el último segmento?
- 13. Problemas de rendimiento con HTML to canvas, ¿dónde comenzar?
- 14. posible utilizar imágenes html como canvas con getImageData/putImageData?
- 15. ¿Procesamiento de imagen con bits de bloqueo, alternativa a getpixel?
- 16. ¿Existe una alternativa más rápida a GDI GetPixel()?
- 17. skip focus from TAB jump
- 18. HTML5 Canvas Mouse Wheel Evento
- 19. Operaciones compuestas en Android Canvas
- 20. HTML5 Canvas drawing líneas multicolores
- 21. Crear mediante programación HTML5 Canvas
- 22. PHP mail function 'from' address
- 23. Anti-alias de canvas HTML5?
- 24. Usando Maven from Ant
- 25. stream media FROM iphone
- 26. startActivityForResult from ActivityGroup?
- 27. SQL Dump from DB2
- 28. SELECCIONAR cualquier sistema FROM
- 29. .htaccess deny from all
- 30. MVC Views from Database
no debería ser esto context.getImageData() y no canvas.getImageData()? – Crashalot
@Crashalot depende de lo que contenga el "lienzo" var, podría ser simplemente el contexto de un lienzo con un nombre vario de mierda. – tbleckert
¡Guau, muy elegante! Pensé en buscar el punto en todo el contexto, pero esto es mucho más inteligente. – TheOne