Смешивание холста не работает

Question

При запуске кода для смешивания между изображением и фоном я не мог решить, почему он не работает. Я делаю это с использованием смешивания холста, потому что у него больше совместимости с перекрестными браузерами, чем css3 background-blend-mode, но у меня есть проблема с его рендерингом, поскольку вы увидите, что снимок ниже изображений вообще не смешивается. Я любитель с javascript, поэтому я, возможно, что-то не хватает.

\t \t var canvas=document.getElementById("header_photo"); 
 
\t \t var ctx=canvas.getContext("2d"); 
 
\t \t var cw=canvas.width; 
 
\t \t var ch=canvas.height; 
 
    \t \t ctx.globalCompositeOperation = "source-over"; 
 

 
\t \t var img = new Image(); 
 
\t \t img.onload = start; 
 
\t \t img.src = "https://i.stack.imgur.com/Yfi8y.jpg"; 
 

 
\t \t var images = new Image(); 
 
\t \t images.onload = starting; 
 
\t \t images.src = "https://i.stack.imgur.com/Ut7Wk.jpg"; 
 

 
\t \t function start(){ 
 

 
\t \t var c1=scaleIt(img,1); 
 

 
\t \t canvas.width=c1.width/1; 
 
\t \t canvas.height=c1.height/1; 
 
\t \t ctx.drawImage(c1,0,0); 
 
\t \t ctx.globalCompositeOperation = 'multiply'; 
 

 
\t \t } 
 

 
\t \t function starting(){ 
 

 
\t \t var c1=scaleIt(images,1); 
 

 
\t \t canvas.width=c1.width/1; 
 
\t \t canvas.height=c1.height/1; 
 
\t \t ctx.drawImage(c1,0,0); 
 

 
\t \t } 
 

 
\t \t function scaleIt(source,scaleFactor){ 
 
\t \t var c=document.createElement('canvas'); 
 
\t \t var ctx=c.getContext('2d'); 
 
\t \t var w=source.width*scaleFactor; 
 
\t \t var h=source.height*scaleFactor; 
 
\t \t c.width=w; 
 
\t \t c.height=h; 
 
\t \t ctx.drawImage(source,0,0,w,h); 
 
\t \t ctx.globalCompositeOperation = 'source-out'; 
 
\t \t return(c); 
 
\t \t }

html, body { 
 
    height: 100%; 
 
    overflow-x: hidden; } 
 

 
header { 
 
    width: 100%; 
 
    height: 100%; } 
 
    header #header_photo { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    opacity: 1; }

<header> 
 
    <canvas id="header_photo"></canvas> 
 
</header>

Answer 1

Основной проблемой вы столкнулись в том, что установка на холст width или height свойств делает сброс свойств всего контекста (в том числе ОПО, и что было обращено к нему ранее).

Также обратите внимание, что способ, которым вы его выполняете, не гарантирует, в каком порядке начнется или начнется запуск. Таким образом, вы можете получить нежелательные результаты. Вы должны создать единую функцию запуска, которая будет запускаться только при загрузке обоих изображений.

var canvas = document.getElementById("header_photo"); 
 
var ctx = canvas.getContext("2d"); 
 
var cw = canvas.width; 
 
var ch = canvas.height; 
 
ctx.globalCompositeOperation = "source-over"; 
 

 
var img = new Image(); 
 
img.onload = loadHandler; 
 
img.src = "https://i.stack.imgur.com/Yfi8y.jpg"; 
 

 
var images = new Image(); 
 
images.onload = loadHandler; 
 
images.src = "https://i.stack.imgur.com/Ut7Wk.jpg"; 
 

 
var loaded = 0; 
 
function loadHandler(){ 
 
    if(++loaded == 2){ 
 
     start(); 
 
    } 
 
    } 
 

 
function start() { 
 
    var c1 = scaleIt(img, 1); 
 
    var c2 = scaleIt(images, 1); 
 
    canvas.width = c1.width/1; 
 
    canvas.height = c1.height/1; 
 
    ctx.drawImage(c1, 0, 0); 
 
    ctx.globalCompositeOperation = 'multiply'; 
 
    // here don't resize the main canvas, but use drawImage sizing options 
 
    ctx.drawImage(c2, 0, 0, c1.width, c1.height); 
 
} 
 

 

 
function scaleIt(source, scaleFactor) { 
 
    var c = document.createElement('canvas'); 
 
    var ctx = c.getContext('2d'); 
 
    var w = source.width * scaleFactor; 
 
    var h = source.height * scaleFactor; 
 
    c.width = w; 
 
    c.height = h; 
 
    ctx.drawImage(source, 0, 0, w, h); 
 
    ctx.globalCompositeOperation = 'source-out'; 
 
    return (c); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    overflow-x: hidden; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
header #header_photo { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    opacity: 1; 
 
}

<header> 
 
    <canvas id="header_photo"></canvas> 
 
</header>