/**
* Converts data URI in 'image/png' format to an image data object
* #param dataURL Base64 encoded string
* #returns {ImageData/undefined}
*/
convertDataURLToImageData: function (dataURL) {
if (dataURL !== undefined && dataURL !== null) {
var canvas, context, image, imageData;
canvas = document.createElement('canvas');
canvas.width = 470;
canvas.height = 470;
context = canvas.getContext('2d');
image = new Image();
image.addEventListener('load', function(){
context.drawImage(image, 0, 0, canvas.width, canvas.height);
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
//how do i return this?
}, false);
image.src = dataURL;
return imageData;
}
}
considering the snippet above, if I would like to get an array of image data from a data URL I wold draw it on a canvas , how do I return the image data?
The problem is that your function is asynchronous, because you are waiting for the load event.
Then, you could use promises:
function convertURIToImageData(URI) {
return new Promise(function(resolve, reject) {
if (URI == null) return reject();
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
image = new Image();
image.addEventListener('load', function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, canvas.width, canvas.height);
resolve(context.getImageData(0, 0, canvas.width, canvas.height));
}, false);
image.src = URI;
});
}
var URI = "data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAABMLAAATCwAAAAAAAAAAAABsiqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/iKC3/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/2uLp///////R2uP/dZGs/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/////////////////+3w9P+IoLf/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv///////////+3w9P+tvc3/dZGs/2yKpv9siqb/bIqm/2yKpv9siqb/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH////////////0+Pv/erDR/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB//////////////////////96sNH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf////////////////+Ft9T/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/E4zV/xOM1f8TjNX/E4zV/yKT2P/T6ff/////////////////4fH6/z+i3f8TjNX/E4zV/xOM1f8TjNX/E4zV/xOM1f8TjNX/E4zV/xOM1f+m1O/////////////////////////////w+Pz/IpPY/xOM1f8TjNX/E4zV/xOM1f8TjNX/E4zV/xOM1f8TjNX////////////T6ff/Tqng/6bU7////////////3u/5/8TjNX/E4zV/xOM1f8TjNX/AIv//wCL//8Ai///AIv/////////////gMX//wCL//8gmv////////////+Axf//AIv//wCL//8Ai///AIv//wCL//8Ai///AIv//wCL///v+P///////+/4//+Axf//z+n/////////////YLf//wCL//8Ai///AIv//wCL//8Ai///AIv//wCL//8Ai///gMX/////////////////////////////z+n//wCL//8Ai///AIv//wCL//8Ai///AHr//wB6//8Aev//AHr//wB6//+Avf//7/f/////////////v97//xCC//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==";
convertURIToImageData(URI).then(function(imageData) {
// Here you can use imageData
console.log(imageData);
});
var img = new Image;
img.src = strDataURI;
try this hope u will understand ..
Related
I have an ImageData object but Tesseract.js only takes blob objects. How can I convert the ImageData to a blob as performantly as possible?
Referring here, the code should look like -
const ImageDataToBlob = function(imageData){
let w = imageData.width;
let h = imageData.height;
let canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
let ctx = canvas.getContext("2d");
ctx.putImageData(imageData, 0, 0); // synchronous
return new Promise((resolve) => {
canvas.toBlob(resolve); // implied image/png format
});
}
Tesseract.js also takes some other types - https://github.com/naptha/tesseract.js/blob/master/docs/image-format.md - and I have found some code on the internet to convert:
function imgDataToImage(imagedata) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = imagedata.width;
canvas.height = imagedata.height;
ctx.putImageData(imagedata, 0, 0);
var image = new Image();
image.src = canvas.toDataURL();
return image;
}
I am trying to get the rgb value of an image after I render the image inside canvas. However I am getting all 0s in return. I am trying to use getImageData() after I render the image not sure why I am getting 0s in return.
My Code :
fileSelected: File;
preview: any;
context: CanvasRenderingContext2D;
hue: any;
myImageData:any
onFileSelect(e: any) {
let canvas = this.mycanvas.nativeElement;
let context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height)
let imgData;
this.fileSelected = e.target.files[0];
let reader = new FileReader()
reader.onload = (e: any) => {
var image = new Image();
image.onload = function () {
image.width = canvas.width;
image.height = canvas.height;
context.drawImage(image, 0, 0, canvas.width, canvas.height)
};
image.src = e.target.result
}
reader.readAsDataURL(this.fileSelected);
this.myImageData = context.getImageData(0, 0, 100, 100);
this.hue = this.calculateHue(this.fileSelected, this.myImageData);
}
calculateHue(file, myImageData) {
console.log("rgb====", myImageData.data)
return null
}
I have gone through these links getImageData() returning all zeros, getImageData() returning all 0's, getImageData always returning 0
But none of the answers solved it. What am I doing wrong?
You're writing to the canvas as soon as the image is loaded, however you're trying to read from the canvas as soon as a file is selected, move:
this.myImageData = context.getImageData(0, 0, 100, 100);
this.hue = this.calculateHue(this.fileSelected, this.myImageData);
into the image.onload and after the context.drawImage(image, 0, 0, canvas.width, canvas.height) call so you're sure there is image data that you can read.
It should look something like this:
onFileSelect(e: any) {
let canvas = this.mycanvas.nativeElement;
let context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height)
let imgData;
this.fileSelected = e.target.files[0];
let reader = new FileReader();
let self = this;
reader.onload = (e: any) => {
var image = new Image();
image.onload = () => {
image.width = canvas.width;
image.height = canvas.height;
context.drawImage(image, 0, 0, canvas.width, canvas.height)
// Move it here
self.myImageData = context.getImageData(0, 0, 100, 100);
self.hue = this.calculateHue(self.fileSelected, self.myImageData);
};
image.src = e.target.result
}
reader.readAsDataURL(this.fileSelected);
}
I am trying to get base64 data from image url but it always return "data:"
Here's the code :
function getBase64Image(imgurl) {
var canvas = document.createElement("canvas");
var img = new Image();
img.src = imgurl;
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Use img.onload to execute the code after your image has loaded. Use a callback function to report back the dataURL.
function getBase64Image(imgurl, callback) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
if (typeof callback === 'function') {
callback(dataUrl);
}
};
img.src = imgurl;
}
I'm creating a web-based application which allows users to upload an image and then add logos and text.
Obviously, if they need to change the logo it will be necessary for them to clear the canvas and add the logo again. However, I can't work out how to clear the canvas and re-upload the background image they have already added, to save them from having to upload the background image for a second time too.
The code to upload the background image in the first place is as follows:
document.getElementById('upload').addEventListener('change', doUpload);
function doUpload(e){
var file = e.target.files[0];
if(file){
var reader = new FileReader();
reader.onload = function loadBg(event){
canvasLoadImage(event.target.result);
}
reader.readAsDataURL(file);
}
}
function canvasLoadImage(imgData){
var img = new Image();
img.src = imgData;
img.onload = function drawBg(){
context.drawImage(img, 0, 0, 1280, img.height * (1280/img.width));
}
}
The code I'm using to clear the canvas is as follows:
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);
Does anyone know how I might re-add the image a user has already uploaded as part of the same function, and without them having to upload it for a second time?
you may save the data in a global variable and reuse it as a result of the cancellation of the canvas. For example:
var oData = null;
...
function canvasLoadImage(imgData){
var img = new Image();
img.src = imgData;
oData = imgData;
img.onload = function drawBg(){
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.drawImage(img, 0, 0, 1280, img.height * (1280/img.width));
}
}
...
document.getElementById('clear').addEventListener('click', function() {
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.clearRect(0, 0, c.width, c.height);
var img = new Image();
img.src = oData;
context.drawImage(img, 0, 0, 1280, img.height * (1280/img.width));
}, false);
How do I redraw the pixel array after I after I have previously used getImageData? The way that I thought made sense gives me the error: An invalid or illegal string was specified" code: "12
function makeImage(canvasId, background, object) {
var canvas = document.getElementById(canvasId);
var ctx = canvas.getContext('2d');
var backgroundData = null;
var objectData = null;
//Get image Data
function getDataFromImage(img) {
canvas.width = img.width;
canvas.height = img.height;
ctx.clearRect(0, 0, img.width, img.height);
ctx.drawImage(img, 0 ,0);
return ctx.getImageData(0, 0, img.width, img.height);
}
//Load image
function loadImage(src, callback) {
var img = document.createElement('img');
img.onload = callback;
img.src = src;
return img;
}
//Get Background Image Data
var backgroundImg = loadImage(background, function() {
backgroundData = getDataFromImage(backgroundImg);
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
//Get Object Image Data
var objectImg = loadImage(object, function() {
objectData = getDataFromImage(objectImg);
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
main();
function main() {
ctx.putImageData(backgroundData, 0, 0); //Try to redraw the background??
}
};
I think you might need to put the
main()
call inside the loadImage call that is populating backgroundData. It could be that main is called before the image has loaded.
var backgroundImg = loadImage(background, function() {
backgroundData = getDataFromImage(backgroundImg);
ctx.clearRect(0, 0, canvas.width, canvas.height);
main();
});