比较两个图像并使用像素匹配查看差异 - 刷新画布失败

Question

在我的代码笔中，我想使用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. 从<img>标记创建图像数据对象，并从图像中检索Uint8Array的数据
2. 使用imageData.data将每个图像的Uint8Array传递给函数pixelmatch
3. 填充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);
}

问题

为什么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;

以写入结果到页面，以便画布的大小适合图像。

更新的代码笔：https://codepen.io/anon/pen/dEVNmv