Skip to content

Feature/14 base64 #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature/14 base64 #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9e2275d
Added Base64 to ImageData feature
icoach Apr 13, 2013
6107d6e
Merge branch 'master' of github.com:icoach/js-imagediff into feature/…
cesutherland Aug 15, 2013
59979c3
Curate the base64 PR and add some specs.
cesutherland Nov 28, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions examples/image-type-base64.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
var imagediff = require('../js/imagediff.js'),
fs = require('fs');

var source = fs.readFileSync('1_normal_a.jpg');
var target = fs.readFileSync('1_normal_b.jpg');

source = "data:image/jpg;base64," + source.toString('base64');
target = "data:image/jpg;base64," + target.toString('base64');

var isEqual = imagediff.equal(source, target, 0);

console.log("Images are equal: " + isEqual);
27 changes: 27 additions & 0 deletions imagediff.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,16 @@


// Type Checking
function isBase64Image (string) {
var base64Regex = /^([A-Za-z0-9+\/]{4})*([A-Za-z0-9+\/]{4}|[A-Za-z0-9+\/]{3}=|[A-Za-z0-9+\/]{2}==)$/,
imageRegex = /^data:image\/(png|jpg);base64,/,
imageType = string.match(imageRegex);

if (imageType == null) {
return false;
}
return base64Regex.test(string.replace(imageRegex, ""));
}
function isImage (object) {
return isType(object, TYPE_IMAGE);
}
Expand All @@ -67,6 +77,7 @@
}
function isImageType (object) {
return (
isBase64Image(object) ||
isImage(object) ||
isCanvas(object) ||
isContext(object) ||
Expand Down Expand Up @@ -98,11 +109,26 @@
return newImageData;
}
function toImageData (object) {
if (isBase64Image(object)) { return toImageDataFromBase64(object); }
if (isImage(object)) { return toImageDataFromImage(object); }
if (isCanvas(object)) { return toImageDataFromCanvas(object); }
if (isContext(object)) { return toImageDataFromContext(object); }
if (isImageData(object)) { return object; }
}

function toImageDataFromBase64 (string) {
var image = new Canvas.Image;
image.src = string;

var height = image.height,
width = image.width;

canvas.width = width;
canvas.height = height;
context.clearRect(0, 0, width, height);
context.drawImage(image, 0, 0);
return context.getImageData(0, 0, width, height);
}
function toImageDataFromImage (image) {
var
height = image.height,
Expand Down Expand Up @@ -340,6 +366,7 @@
createCanvas : getCanvas,
createImageData : getImageData,

isBase64Image : isBase64Image,
isImage : isImage,
isCanvas : isCanvas,
isContext : isContext,
Expand Down
2 changes: 1 addition & 1 deletion imagediff.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 35 additions & 4 deletions js/imagediff.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,16 @@


// Type Checking
function isBase64Image (string) {
var
base64Regex = /^([A-Za-z0-9+\/]{4})*([A-Za-z0-9+\/]{4}|[A-Za-z0-9+\/]{3}=|[A-Za-z0-9+\/]{2}==)$/,
imageRegex = /^data:image\/(png|jpg);base64,/;
return (
typeof string === 'string' &&
imageRegex.test(string) &&
base64Regex.test(string.replace(imageRegex, ""))
);
}
function isImage (object) {
return isType(object, TYPE_IMAGE);
}
Expand All @@ -64,7 +74,8 @@
isImage(object) ||
isCanvas(object) ||
isContext(object) ||
isImageData(object)
isImageData(object) ||
isBase64Image(object)
);
}
function isType (object, type) {
Expand Down Expand Up @@ -96,6 +107,25 @@
if (isCanvas(object)) { return toImageDataFromCanvas(object); }
if (isContext(object)) { return toImageDataFromContext(object); }
if (isImageData(object)) { return object; }
if (isBase64Image(object)) { return toImageDataFromBase64.apply(null, arguments); }
}

function toImageDataFromBase64 (string, callback) {
var
image = new Image;
image.src = string;
image.onload = function () {
var
height = image.height,
width = image.width;
canvas.width = width;
canvas.height = height;
context.clearRect(0, 0, width, height);
context.drawImage(image, 0, 0);
if (callback) {
callback(context.getImageData(0, 0, width, height));
}
};
}
function toImageDataFromImage (image) {
var
Expand Down Expand Up @@ -334,6 +364,7 @@
createCanvas : getCanvas,
createImageData : getImageData,

isBase64Image : isBase64Image,
isImage : isImage,
isCanvas : isCanvas,
isContext : isContext,
Expand All @@ -343,16 +374,16 @@
toImageData : function (object) {
checkType(object);
if (isImageData(object)) { return copyImageData(object); }
return toImageData(object);
return toImageData.apply(null, arguments);
},

equal : function (a, b, tolerance) {
equal : function (a, b, tolerance, callback) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the purpose of the callback in this function?

checkType(a, b);
a = toImageData(a);
b = toImageData(b);
return equal(a, b, tolerance);
},
diff : function (a, b) {
diff : function (a, b, callback) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same question as above, the callbacks are not never called.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In some cases the image is not loaded immediately. We must wait for image.onload but I never finished wiring it up.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you referring to the images being passed into the diff function, or the diff image that is generated?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This and the following line:
https://github.com/HumbleSoftware/js-imagediff/pull/26/files#diff-072ad2b67177ebe639260e22ca6f414dR116

We need to load the base64 src to an image before drawing that image to a canvas.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I recommend setting the onload function before setting the src to avoid the race condition where the image is loaded before onload is set.

checkType(a, b);
a = toImageData(a);
b = toImageData(b);
Expand Down
25 changes: 25 additions & 0 deletions spec/ImageDiffSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ describe('ImageUtils', function() {
it('should check Canvas type', testType('isCanvas', canvas));
it('should check 2DContext type', testType('isContext', context));
it('should check ImageData type', testType('isImageData', imageData));
it('should check Base 64 type', testType('isBase64Image', canvas.toDataURL()));
it('should check for any of the image types', function () {
expect(imagediff.isImageType(null)).toEqual(false);
expect(imagediff.isImageType('')).toEqual(false);
Expand All @@ -112,6 +113,7 @@ describe('ImageUtils', function() {
expect(imagediff.isImageType(canvas)).toEqual(true);
expect(imagediff.isImageType(context)).toEqual(true);
expect(imagediff.isImageType(imageData)).toEqual(true);
expect(imagediff.isImageType(canvas.toDataURL())).toEqual(true);
});
});

Expand Down Expand Up @@ -179,6 +181,29 @@ describe('ImageUtils', function() {
expect(result).toBeImageData();
});

it('should convert Base64 to ImageData', function () {
var
canvas = imagediff.createCanvas(),
context = canvas.getContext('2d'),
result;

canvas.height = image.height;
canvas.width = image.width;
context.drawImage(image, 0, 0);

imagediff.toImageData(canvas.toDataURL(), function (image) {
result = image;
});

waitsFor(function () {
return !!result;
}, 'async image data not set', 100);

runs(function () {
expect(result).toBeImageData();
});
});

it('should copy ImageData to new ImageData', function () {
result = imagediff.toImageData(imageData);
expect(result).toBeImageData();
Expand Down