7

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

введите сюда описание изображения

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

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

1

2 ответа 2

8

Для этого вам понадобятся 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}
<canvas id="canvas">
  <img src="data:image/jpeg;base64,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" id="box"  />
  
</canvas>
<canvas id="canvas1">  
  
  <img id="lines" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImJveCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIyMjVweCIgaGVpZ2h0PSIyMjVweCIgdmlld0JveD0iMCAwIDIyNSAyMjUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyNSAyMjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KDQoJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgIHBvaW50cz0iMTEyLjUsNzUgMTEyLjUsMTk1IDE3OCwxNTcgMTc4LDU3ICIvPg0KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHBvaW50cz0iNDQsNTcgNDQsMTU5IDExMiwxOTUgMTEyLjUsNzQgIi8+DQoJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgcG9pbnRzPSIxMTIuNSw0NSAxMTIuNSwxMzYgMTc4LDE1OCAxNzgsNTUgIi8+DQoJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgIHBvaW50cz0iNDYsNTYgMTEyLjUsNDMgMTEyLjUsMTM2IDQ2LDE2MCAiLz4NCgk8cG9seWdvbiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiAgcG9pbnRzPSI0Myw1NiAwLDc4IDcyLDk5IDExMi41LDczICIvPg0KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siICBwb2ludHM9IjExMi41LDc0IDE2MSw4OCAyMjUsNjcgMTc5LDU2ICIvPg0KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siICBwb2ludHM9IjExMi41LDQyIDE3NCw1NiAyMDAsNDkgMTQzLDM3ICIvPg0KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siICBwb2ludHM9IjQ2LDU3IDEwOC4xNjYsNDQuODQ3IDgwLDM3IDE2LDUwLjUgIi8+DQoJPC9zdmc+DQo=" />
</canvas>

3

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

  1. Рисуем изображение на канве.

  2. Запоминаем о информацию о его пикселях.

  3. Находим контуры при помощи оператора Кенни

  4. Смешиваем данные запомненные на шаге 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)
            }
        } 
    }
}
<body style="margin:0;overflow:hidden;">
<script src="http://yuta1984.github.io/canny/canny.js"></script>
<img id="img" crossOrigin="anonymous" src="https://i.imgur.com/BrWFG68.jpg">
<canvas id="canvas"></canvas>
</body>

4
  • давно собирался оформить ответ, но как то руки не доходили, тут можно еще с фильтром поиграться... 4 июл 2019 в 21:46
  • "из текста удалено 16570 символов" - Краткость - сестра таланта или брат?? :-) 5 июл 2019 в 10:45
  • @Alexandr_TT мне вчера вечером было лень искать на просторах интернета скрипт, который раздается с корректными заглоловками, чтобы его вставить ссылкой, и я его добавил прямо в код =) и картнку я запостил на imgur, подсократив этим изрядно 5 июл 2019 в 10:53
  • ну тогда в силу вступает вторая пословица< - "Лень - двигатель прогресса" 5 июл 2019 в 10:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.