在 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});
我得到了这个工作
<img>
的对象-标记并检索数据为Uint8Array
来自图片 Uint8Array
每张图片使用 imageData.data
到函数 pixelmatch
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>
辅助函数
首先是从图像中获取“ Canvas ”的辅助函数
// 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)
}
什么不起作用
imgDataOutput
中的值在第三张图像或 Canvas 上显示两个图像的差异这是不会产生预期结果的代码
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)
的输出 Canvas 是空的?我必须改变什么才能放
imgDataOutput
在页面上作为 <img>
或作为 <canvas>
?这里是 my matching codepen
最佳答案
问题是您需要在此处将“.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 使 Canvas 的大小适合图像。
更新的代码笔:https://codepen.io/anon/pen/dEVNmv
关于javascript - 比较两个图像并使用像素匹配查看差异 - 刷新 Canvas 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56216348/