Есть ли способ в JQuery изменить часть изображения?

Question

если у меня есть изображение (jpg, png, gif. На самом деле не имеет значения), и я хочу, чтобы какой-нибудь код JavaScript изменил часть изображения.

например, скажем, iу меня есть это изображение печенья, как здесь .

, и у меня есть палитра цветов, которая позволяет человеку выбрать цвет.Я хочу изменить цвет части изображения (в данном случае, скажем, цвет шоколадной стружки) на выбранный цвет.

что можно сделать в javascript / jquery?

Answer 1

Это возможно с Javascript и элементом canvas, напрямую манипулируя данными пикселей.Приведенный ниже пример превращает синий цвет в красный.

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

canvas.height = canvas.width = 45;
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 45, 45),
    pix = imgd.data;

for (var i = 0, n = pix.length; i <n; i += 4) {
    if(pix[i + 2] > 20){ // Blue threshold
        // Swap red and blue component values.

        var redVal = pix[i]; // Copy the current red component value
        pix[i] = pix[i + 2]; // Assign the current blue component value to red
        pix[i+2] = redVal; // Assign the old red value to blue.
    }
}

ctx.putImageData(imgd, 0, 0);

Однако это сделать не очень быстро, и дляДля больших изображений вы заметите заметное снижение производительности в зависимости от браузера.Что касается jQuery, то jQuery не имеет ничего общего с этим, что могло бы помочь.