We Keep Coding

Compare two images and see the difference using pixelmatch - refreshing canvas fails

In my codepen i want to use pixelmatch to show the difference of two images in the browser. The function is used like this
// 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});
I got this to work
create an ImageData-Object from an <img>-tag and retrieve the data as Uint8Array from the image
pass the Uint8Array for each image using imageData.data to the function pixelmatch
fill imageDataOutput and get a number of different pixels in numDiffixels
the 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>
Helper Function
First a helper function to get a 'canvas' from an image
// 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;
}
The main function
The the main function to compare the images
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)
}
What does not work
using the values from imgDataOutput to show the differences of the two images in a third image or on a canvas
What is not working: either a black image is created or the output-canvas is empty
This is the code that does not produce the desired result
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);
}
Question
Why is the output-canvas from writeResultToPage(imgDataOutput) empty?
What do i have to change to put imgDataOutput on the page as either an <img> or as a <canvas>?
Here is my matching codepen

The problem is that you need to add ".data" to imgDataOutput here:
var numDiffPixels = pixelmatch(imgDataBefore.data, imgDataAfter.data,
imgDataOutput.data, wdth, hght, {threshold: 0.1});
I also added:
canvas.width = imgDataOutput.width;
canvas.height = imgDataOutput.height;
to writeResultToPage so that the canvas is the right size for the image.
Updated codepen: https://codepen.io/anon/pen/dEVNmv

How to make html5 canvas display crisp image based off chrome screencap

I am making a chrome extension that uses the chrome.tabs.captureVisibleTab method to grab a screencap of the current tab and then displays that in a popup from the chrome extension. If I use the img tag and use the data coming from the chrome function, such as data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwME…UUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/2Q==, the <img> displays pixel perfect, it is crisp and that's what I want. Problem is that I need to make it into a canvas, and when I do that, it becomes blurry.
This is a screencap of the <img> that uses the link data provided by Google to be used as a comparison to the canvas which is below.
This is the blurry canvas.
This is the code that I am using to try to do this, but I can't figure out how to make the canvas crisp like the image.
chrome.runtime.sendMessage({msg: "capture"}, function(response) {
console.log(response.imgSrc);
var img = document.createElement('img');
var _canvas = document.createElement("canvas");
img.src = response.imgSrc;
img.height = 436;
img.width = 800;
document.getElementById('main-canvas').appendChild(img);
draw(response);
});
function draw(response) {
var canvas = document.getElementById('imageCanvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
//Get a 2d context
var ctx = canvas.getContext('2d');
//use image to paint canvas
var _image = new Image();
_image.onload = function() {
ctx.drawImage(_image, 0, 0, 800, 436);
}
_image.src = response.imgSrc;
document.getElementById('main-canvas').appendChild(canvas);
}

This is what I used to fix my problem: High Resolution Canvas from HTML5Rocks

How to save an HTML5 canvas to a png [duplicate]

This question already has answers here:
How to save a png from javascript variable
(10 answers)
Closed 8 years ago.
I am trying to have a canvas be saved as an image so it can be put somewhere else on the website as an tag.
I have seen approaches like this:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var strDataURI = canvas.toDataURL("image/png;base64");
document.write('<img src="'+strDataURI+'"/>');
But I am not sure how to implement it. I also would like a copy of the image to be saved as an actual file on the server as well but I am not sure where to start.
When I implement the above code, I put it at the bottom of my canvas script like such:
var finish = document.getElementID('finish');
finish.onclick = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var strDataURI = canvas.toDataURL("image/png;base64");
};
But I don't know how to actually reference the image.
A little help for noob is all I need.

For the frontside here's a full working example only showing a red background.
http://jsfiddle.net/gramhwkg/
// create a canvas
// If the canvas is already a dom element
//var canvas = document.getElementById("canvas");
// otherwise you'd rather do
var canvas = document.createElement('canvas');
// Then set a width/height grab its context.
canvas.width = 900;
canvas.height = 400;
var ctx = canvas.getContext("2d");
// ... And do plenty of nice stuff with it.
// I'll just draw it Red.
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,900,400);
// When you want it to appear elsewhere.
var data = canvas.toDataURL();
var picture = document.getElementById("my-picture");
picture.innerHTML = '<img src="' + data + '"/>' ;
The backend part is not much harder. Just POST to php the same image data variable and handle it that way :
$canvas = base64_decode(str_replace('data:image/png;base64,', '' , $value['picture']));
file_put_contents('my_custom_path/my_custom_filename.png', $canvas);
Hope this helps !

Give height to the image object using javascript is not working

I am trying to give height to an image object using javascript, But its not working.
html code
<canvas id="canvas1" height="500px" width="500px">
</canvas>
I want to create background image using javascript and this image must be set according to canvas size.
Javascript code:
canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
var bg = new Image();
bg.src = "images/bg.png";
bg.height = "100";
bg.width = "100";
c.drawImage(bg,0,0);
I can see the image but can not give the height and width of that image at run time.
How can i give the height and width of image object at runtime.?
Thank you in advance for your help.

There are a few issues in the code:
Issue 1
The first one being the tag attributes. Doesn't really affect the result but the correct syntax is an integer value without px at the end as width and height for canvas can only use pixels:
<canvas id="canvas1" height="500" width="500"></canvas>
Issue 2
The next issue is that you try to set read-only properties on the image element:
var bg = new Image();
bg.src = "images/bg.png";
//bg.height = "100"; invalid
//bg.width = "100"; invalid
You don't really need to set the image size; you can if you absolutely want by using this syntax (then get actual size using naturalWidth / naturalHeight if you should need them later - the full image will be loaded in any case):
var bg = new Image(width, height);
But you can simply use width and height with the drawImage() method (see below).
Issue 3
The third issue is that you don't allow the image to load. Image loading is asynchronous so you need to add an onload handler:
var bg = new Image();
bg.onload = done; /// wait for image to load, then call done()
bg.src = "images/bg.png";
function done() {
c.drawImage(bg,0,0);
/// continue here
}
Optionally define the destination size like this:
function done() {
c.drawImage(bg,0,0, width, height); /// the size you want
/// continue here
}
If you want to fill the canvas use:
c.drawImage(bg,0,0, canvas.width, canvas.height);
Hope this helps!

Since it's on a canvas you need to set them in the drawimage function
canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
var bg = new Image();
bg.src = "images/bg.png";
c.drawImage(bg,0,0, 100, 100);

canvas.toDataUrl returns empty, canvas size is not zero

Im writing app in html5 that needs to be work on cell phones,
this app uploads an image from the phone to server of my company.
Now its working on android and inthe computer, on Iphone its work only when i picture in the front camera, if i get a pic from the back camera I get empty data.
I create an InputElement type file,
and event onChange for the input element, that call the function inputFile_onChange that get an ElementEvent el:
var file = el.target.files[0];
var reader = new FileReader();
reader.onloadend = (function(theFile) {return function(e) {
$('#uploadImage').attr('src',e.target.result);
$('#uploadImage').css('display','none');
$($('#uploadImage')[0]).one('load',function(){
var cvs = document.createElement('canvas');
$image = $('#uploadImage')[0];
var savingCanvas = document.createElement('canvas');
savingCanvas.width = $image.naturalWidth;
savingCanvas.height = $image.naturalHeight;
var savingCanvasCtx = savingCanvas.getContext('2d');
FileUploadApp._globals.drawImage(savingCanvasCtx, $image, 0, 0,
savingCanvas.width,savingCanvas.height);
var newImageData = savingCanvas.toDataURL('image/jpeg', 0.2);
}).each(function() {if(this.complete) $(this).load();});
};
})(file);
reader.readAsDataURL(file);
I put an alert after the newImageData create and get "data: ," when i look for answer in the web i see that i get this if canvas sizes are 0, but i also print the size - width and hight and both of them are big >1000
Ill be glad to get some help with it.

I found the problem,
the function canvas.toDataURL return nothing when the canvas is big,
I shrink the canvas to 1000 pix and the problem solved