Сравните два изображения и посмотрите разницу, используя pixelmatch - обновление холста не удается

Question

In my codepen Я хочу использовать pixelmatch , чтобы показать разницу двух изображений в браузере.Функция используется следующим образом:

// img1, img2 — ImageData.data of the images to compare  
// output — ImageData to write the diff to, or null if don't need a diff image.
// width, height of the images - all 3 images need to have the same dimensions.


// calling pixelmatch  looks like this
var numDiffPixels = pixelmatch(img1.data, img2.data
      , imageDataOutput, wdth, hght, {threshold: 0.1});

Я получил это, чтобы работать

1. создать ImageData -объект из тега <img> и получитьданные Uint8Array из изображения
2. передают Uint8Array для каждого изображения с помощью imageData.data в функцию pixelmatch
3. fill imageDataOutput и получают количество различных пикселей вnumDiffixels

HTML

<p>
    <img id="imgBefore" src="./img/T1_Before.jpg">
    <img id="imgAfter" src="./img/T1_After.jpg"  >
</p>
<p>
    <button id="diff" class="js-compareImages">compare images</button>
    <canvas id="cnvDiff"></canvas>
</p>
<p id="result"> </p>

Вспомогательная функция

Первая вспомогательная функция для получения«холст» из изображения

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(imageID) {
    var image = document.getElementById(imageID);
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    // image.style = "width: 400px";
    return canvas;
}

Основная функция

Основная функция для сравнения изображений

function compareImages()
{        
    var cnvBefore = convertImageToCanvas("imgBefore");
    var cnvAfter = convertImageToCanvas("imgAfter");

    var ctxBefore = cnvBefore.getContext("2d");
    var ctxAfter = cnvAfter.getContext("2d");

    let imgDataBefore = ctxBefore.getImageData(0,0,cnvBefore.width, cnvBefore.height);
    let imgDataAfter = ctxAfter.getImageData(0,0, cnvAfter.width, cnvAfter.height);   

    const hght = imgDataBefore.height;
    const wdth = imgDataBefore.width;

    var imgDataOutput = new ImageData(wdth, hght);

    var numDiffPixels = pixelmatch(imgDataBefore.data, imgDataAfter.data, 
                        imgDataOutput, wdth, hght, {threshold: 0.1});

     // this line does not work
     writeResultToPage(imgDataOutput)

}

Что неработайте

1. , используя значения из imgDataOutput, чтобы показать различия двух изображений в третьем изображении или на холсте
2. Что не работает: либо создается черное изображениеили выходной холст пуст

Этот код не дает желаемого результата

function writeResultToPage(imgDataOutput)
{
  var canvas = document.createElement("canvas"); //  new HTMLCanvasElement();
    var ctx = canvas.getContext("2d");
    ctx.putImageData(imgDataOutput, 0, 0);
    var result = document.getElementById("result");
    result.appendChild(ctx.canvas);
}

Вопрос

Почемуэто оutput-canvas из writeResultToPage(imgDataOutput) пусто?Что мне нужно изменить, чтобы поставить imgDataOutput на странице как <img> или <canvas>?

Вот мой соответствующий кодовый элемент

Answer 1

Проблема в том, что вам нужно добавить «.data» в imgDataOutput здесь:

var numDiffPixels = pixelmatch(imgDataBefore.data, imgDataAfter.data, 
                    imgDataOutput.data, wdth, hght, {threshold: 0.1});

Я также добавил:

canvas.width = imgDataOutput.width;
canvas.height = imgDataOutput.height;

для writeResultToPage, чтобы холст был правильнымразмер для изображения.

Обновлен код ручки: https://codepen.io/anon/pen/dEVNmv