Source code
Revision control
Copy as Markdown
Other Tools
var gImage1;
var gImage2;
var gImageBitmap1;
var gImageBitmap2;
var gImageData;
var gImageBitmap3;
function comparePixelColor(
testImgageData,
groundTruthImageData,
x,
y,
tolerance,
info
) {
ok(
testImgageData.width == groundTruthImageData.width &&
testImgageData.height == groundTruthImageData.height,
"testImgageData and groundTruthImageData should have the same dimension."
);
var index = (groundTruthImageData.width * y + x) * 4;
var r = groundTruthImageData.data[index + 0];
var g = groundTruthImageData.data[index + 1];
var b = groundTruthImageData.data[index + 2];
var a = groundTruthImageData.data[index + 3];
var newR = testImgageData.data[index + 0];
var newG = testImgageData.data[index + 1];
var newB = testImgageData.data[index + 2];
var newA = testImgageData.data[index + 3];
var isTheSame =
Math.abs(r - newR) <= tolerance &&
Math.abs(g - newG) <= tolerance &&
Math.abs(b - newB) <= tolerance &&
Math.abs(a - newA) <= tolerance;
ok(
isTheSame,
"[" +
info +
"] " +
"newImageData(" +
newR +
"," +
newG +
"," +
newB +
"," +
newA +
") should equal to imageData(" +
r +
"," +
g +
"," +
b +
"," +
a +
")."
);
}
function compareImageBitmapWithImageElement(imageBitmap, imageElement) {
var canvas1 = document.createElement("canvas");
var canvas2 = document.createElement("canvas");
canvas1.width = imageElement.naturalWidth;
canvas1.height = imageElement.naturalHeight;
canvas2.width = imageElement.naturalWidth;
canvas2.height = imageElement.naturalHeight;
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
ctx1.drawImage(imageElement, 0, 0);
ctx2.drawImage(imageBitmap, 0, 0);
document.body.appendChild(canvas1);
document.body.appendChild(canvas2);
var imageData1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
var imageData2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
// Create an array of pixels that is going to be tested.
var pixels = [];
var xGap = imageElement.naturalWidth / 4;
var yGap = imageElement.naturalHeight / 4;
for (var y = 0; y < imageElement.naturalHeight; y += yGap) {
for (var x = 0; x < imageElement.naturalWidth; x += xGap) {
pixels.push({ x, y });
}
}
// Also, put the button-right pixel into pixels.
pixels.push({
x: imageElement.naturalWidth - 1,
y: imageElement.naturalHeight - 1,
});
// Do the test.
for (var pixel of pixels) {
comparePixelColor(imageData2, imageData1, pixel.x, pixel.y, 0);
}
}
function compareImageBitmapWithImageData(imageBitmap, imageData, info) {
var canvas1 = document.createElement("canvas");
canvas1.width = imageBitmap.width;
canvas1.height = imageBitmap.height;
var ctx1 = canvas1.getContext("2d");
ctx1.drawImage(imageBitmap, 0, 0);
document.body.appendChild(canvas1);
var imageData1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
// Create an array of pixels that is going to be tested.
var pixels = [];
var xGap = imageBitmap.width / 4;
var yGap = imageBitmap.height / 4;
for (var y = 0; y < imageBitmap.height; y += yGap) {
for (var x = 0; x < imageBitmap.width; x += xGap) {
pixels.push({ x, y });
}
}
// Also, put the button-right pixel into pixels.
pixels.push({ x: imageBitmap.width - 1, y: imageBitmap.height - 1 });
// Do the test.
for (var pixel of pixels) {
comparePixelColor(imageData1, imageData, pixel.x, pixel.y, 5, info);
}
}
function prepareImageBitmaps() {
gImage1 = document.createElement("img");
gImage2 = document.createElement("img");
gImage1.src = "image_rgrg-256x256.png";
gImage2.src = "image_yellow.png";
var p1 = new Promise(function (resolve, reject) {
gImage1.onload = function () {
var promise = createImageBitmap(gImage1);
promise.then(function (bitmap) {
gImageBitmap1 = bitmap;
resolve(true);
});
};
});
var p2 = new Promise(function (resolve, reject) {
gImage2.onload = function () {
var promise = createImageBitmap(gImage2);
promise.then(function (bitmap) {
gImageBitmap2 = bitmap;
resolve(true);
});
};
});
var p3 = new Promise(function (resolve, reject) {
// Create an ImageData with random colors.
var width = 5;
var height = 10;
var data = [
43, 143, 24, 148, 235, 165, 179, 91, 74, 228, 75, 195, 141, 109, 74, 65,
25, 177, 3, 201, 128, 105, 12, 199, 196, 93, 241, 131, 250, 121, 232, 189,
175, 131, 216, 190, 145, 123, 167, 70, 18, 196, 210, 162, 225, 1, 90, 188,
223, 216, 182, 233, 118, 50, 168, 56, 51, 206, 198, 199, 153, 29, 70, 130,
180, 135, 135, 51, 148, 46, 44, 144, 80, 171, 142, 95, 25, 178, 102, 110,
0, 28, 128, 91, 31, 222, 42, 170, 85, 8, 218, 146, 65, 30, 198, 238, 121,
57, 124, 88, 246, 40, 141, 146, 174, 195, 255, 149, 30, 153, 92, 116, 18,
241, 6, 111, 39, 162, 85, 143, 237, 159, 201, 244, 93, 68, 14, 246, 143,
143, 83, 221, 187, 215, 243, 154, 24, 125, 221, 53, 80, 153, 151, 219,
202, 241, 250, 191, 153, 129, 181, 57, 94, 18, 136, 231, 41, 252, 168,
207, 213, 103, 118, 172, 53, 213, 184, 204, 25, 29, 249, 199, 101, 55, 49,
167, 25, 23, 173, 78, 19, 234, 205, 155, 250, 175, 44, 201, 215, 92, 25,
59, 25, 29, 249, 199, 153, 129, 181, 57,
];
gImageData = new ImageData(new Uint8ClampedArray(data), width, height);
// Create an ImageBitmap from the above ImageData.
createImageBitmap(gImageData).then(
bitmap => {
gImageBitmap3 = bitmap;
resolve(true);
},
() => {
reject();
}
);
});
return Promise.all([p1, p2, p3]);
}