Рисование линиями изображений с использованием холста html5

#javascript #css3 #html5 #svg #canvas

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



Начало должно быть плоским полотном. Оно должно начинаться с линий и в конечном итоге
 должно стать полным изображением с цветами.
 Был плагин jQuery (который я не могу найти сейчас)    

Использование JS/JQuery предпочтительнее. Если кто-то знает, что это за плагин, это
также может помочь.
    

Ответы

Ответ 1

В целом идея в том чтобы применить Сanny edge detection для получения контуров изображения
программно. Сам фильтр взят отсюда.


Рисуем изображение на канве.
Запоминаем о информацию о его пикселях.
Находим контуры при помощи оператора Кенни
Смешиваем данные запомненные на шаге 2 с данными в буфере канвы прямыми манипуляциями
в буфере в произвольной пропорции, я сделал плавный переход от 33% до 67% по горизонтальной оси.




img.onload = function() {
    
    let c = canvas.getContext('2d'),
        w = canvas.width = img.width,
        h = canvas.height = img.height;
    
    c.drawImage(img, 0, 0);
    let d = c.getImageData(0, 0, w, h), dd = d.data;
    CannyJS.canny(canvas, 44, 11, 1.4, 3).drawOn(canvas);
    invert();
    mix();
   
    function mix() {
      let i = c.getImageData(0, 0, w, h), id = i.data, l = w/3; 
      forEveryPixel(3, (o, x) => id[o] = x < l ? id[o] : x > 2*l ? dd[o] : 
          (2 - x/l)*id[o] + (x/l - 1)*dd[o]);
      c.putImageData(i, 0, 0); 
    }   
   
    function invert(){
        let i = c.getImageData(0, 0, w, h); 
        forEveryPixel(3, o => i.data[o] = 255 - i.data[o])
        c.putImageData(i, 0, 0); 
    }
    
    function forEveryPixel(count, handlePixel) {
        for (let x = 0; x < w; x++) { 
            for (let y = 0; y < h; y++) {
                let off = (y*w+x)*4;
                for (var n = 0; n < count; n++)
                  handlePixel(off + n, x, y)
            }
        } 
    }
}







Ответ 2

Для этого вам понадобятся 2 изображения: фото и эскиз.

Я работаю с 2 холстами, один из которых может быть скрыт или не прикреплен к DOM. 

Но в следующем примере - для ясности - у меня есть оба видимых холста . Пожалуйста,
прочитайте комментарии в коде.    



window.onload = function() {
let ctx = canvas.getContext("2d");
let ctx1 = canvas1.getContext("2d");
let cw = canvas.width  = canvas1.width = 225;
let ch = canvas.height = canvas1.height = 225;

// вы рисуете фото
ctx.drawImage(box,0,0);
//Вы маскируете фото, используя globalCompositeOperation and a rect filled with a
gradient
ctx.globalCompositeOperation = "destination-in";

let grd = ctx.createLinearGradient(cw, 0,0, 0);
					grd.addColorStop(0,"rgba(0,0,0,1)");
					grd.addColorStop(.75,"rgba(0,0,0,0)");

ctx.fillStyle = grd;
ctx.beginPath()
ctx.fillRect(0,0,cw,ch)


////////////Второй холст //////////////

//Вы рисуете эскиз
ctx1.drawImage(lines,0,0);
//Вы маскируете эскиз используя globalCompositeOperation and a rect filled with a
gradient in the opposite direction
ctx1.globalCompositeOperation = "destination-in";

let grd1 = ctx1.createLinearGradient(0, 0, cw, 0);
					grd1.addColorStop(0,"rgba(0,0,0,1)");
					grd1.addColorStop(.75,"rgba(0,0,0,0)");

ctx1.fillStyle = grd1;
ctx1.beginPath()
ctx1.fillRect(0,0,cw,ch);
//Вы reset холст
ctx1.globalCompositeOperation = "source-over";
//вы рисуете первый холст поверх замаскированного эскиза
ctx1.drawImage(canvas,0,0);
}
canvas{border:1px solid}