Hello I created a promise and call it recursively from a loop to fill an array but the onload never triggers thus never resolving the promise.
Can anyone see anything I'm doing wrong?
function imageResizeToDataUriPromise(url, width, height) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function () {
var imgWidth = img.naturalWidth;
var imgHeight = img.naturalHeight;
var result = _scaleImage(imgWidth, imgHeight, width, height, true);
//create an off-screen canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = result.width;
canvas.height = result.height;
//draw source image into the off-screen canvas:
ctx.drawImage(img, 0, 0, result.width, result.height);
resolve(canvas.toDataURL());
};
img.src = url;
});
}
this is my basic calling block but its in a loop
caller(logo, 150, 150).then
(function (response) {
console.log("Success!", response);
base64Urls.push(response);
});
It works after I use that promise to get an URL and set it to an image element... not sure how you would use the return Data URL. One possible issue is: can you check whether your image source is serving you the image. (double check the network tab in developer tool).
function imageResizeToDataUriPromise(url, width, height) {
return new Promise(function(resolve, reject) {
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function() {
console.log("IMG ONLOAD handler invoked");
var imgWidth = img.naturalWidth;
var imgHeight = img.naturalHeight;
var result = img;
//create an off-screen canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = result.width;
canvas.height = result.height;
//draw source image into the off-screen canvas:
ctx.drawImage(img, 0, 0, result.width, result.height);
ctx.fillStyle = "white";
ctx.font = '21px sans-serif';
ctx.fillText('Hello world', 21, 51);
resolve(canvas.toDataURL());
};
img.src = url;
});
}
imageResizeToDataUriPromise("https://i.imgur.com/j7Ie7pg.jpg", 100, 100)
.then(url => document.querySelector("#an-image").src = url);
console.log("Promise obtained");
<img id="an-image">
I am trying to add an image to my pdf:
var image = '../images/example.jpg';
doc.addImage(image, 'JPEG', 0, 0, 700, 145);
and I get this error:
Error: Supplied data is not a JPEG
however, when I add a base64 image:
var image = 'data:image/jpeg;base64,/9j/6GADS...'
doc.addImage(image, 'JPEG', 0, 0, 700, 145);
it works fine!
why is the first version not working?
I am trying this:
var image = $base64.encode('../images/example.jpg')
the same error above again!
what is happening here? what is the solution?
You can use this.
function toDataUrl(src, callback, outputFormat) {
// Create an Image object
var img = new Image();
// Add CORS approval to prevent a tainted canvas
img.crossOrigin = 'Anonymous';
img.onload = function() {
// Create an html canvas element
var canvas = document.createElement('CANVAS');
// Create a 2d context
var ctx = canvas.getContext('2d');
var dataURL;
// Resize the canavas to the image dimensions
canvas.height = this.height;
canvas.width = this.width;
// Draw the image to a canvas
ctx.drawImage(this, 0, 0);
// Convert the canvas to a data url
dataURL = canvas.toDataURL(outputFormat);
// Return the data url via callback
callback(dataURL);
// Mark the canvas to be ready for garbage
// collection
canvas = null;
};
// Load the image
img.src = src;
}
I use this code to save images in Javascript :
function saveImage() {
var canvas = document.getElementById('myPicture');
var ctx = canvas.getContext('2d');
var img = new Image();
ctx.rect(0, 0, 460, 600);
ctx.fillStyle = 'white';
img = new Image();
img.crossOrigin = 'anonymous';
img.src = "http://localhost/upload/abc.jpg";
ctx.drawImage(img,0,0,_item.width(),_item.height());
return canvas.toDataURL("image/jpeg");
}
When i click button save image:
$("#save").on('click', function () {
var rawImageData = saveImage();
$(this).attr('download', 'your_pic_name.jpeg').attr('href', rawImageData);
});
However the result I get is white image.
And I click on the save button again (ie 2 times) then is now right result. how do I can just click one time only?
Thank you.
It is because the first time you click, anchor doesn't have image data url... You may set the url and forget about the click event.
//$("#save").on('click', function () {
var rawImageData = saveImage();
$(this).attr('download', 'your_pic_name.jpeg')
.attr('href', rawImageData);
//});
OR
$("#save").on('click', function () {
var rawImageData = saveImage();
/*$(this).attr('download', 'your_pic_name.jpeg')
.attr('href', rawImageData);*/
window.location=rawImageData;
});
OR alternatively, you need this file to use following code
var canvas = document.getElementById('myPicture');
function saveImage() {
var ctx = canvas.getContext('2d');
var img = new Image();
ctx.rect(0, 0, 460, 600);
ctx.fillStyle = 'white';
img = new Image();
img.crossOrigin = 'anonymous';
img.src = "http://localhost/upload/abc.jpg";
// ctx.fill...
return canvas.toDataURL("image/jpeg");
}
$("#save").on('click', function () {
var rawImageData = saveImage();
var png= Canvas2Image.saveAsPNG(canvas , true);
});
PS: I don't see where you feel canvas with the image...int the saveImage function
Like the title says, I have a byte array representing the contents of an image (can be jpeg or png).
I want to draw that on a regular canvas object
<canvas id='thecanvas'></canvas>
How can I do that?
UPDATE I tried this (unsuccesfully):
(imgData is a png sent as a byte array "as is" through WebSockify to the client)
function draw(imgData) {
"use strict";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var rdr = new FileReader();
var imgBlob = new Blob([imgData], {type: "image/png"});
rdr.readAsBinaryString(imgBlob);
rdr.onload = function (data) {
console.log("Filereader success");
var img = new Image();
img.onload = function () {
console.log("Image Onload");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.onerror = function (stuff) {
console.log("Img Onerror:", stuff);
};
img.src = "data:image/png;base64," + window.btoa(rdr.result);
};
}
I always reach img.onerror()
Also After reading the file with a HEX editor on my file system, I can see that the byte array is identical to the original file.
This Works:
function draw2(imgData, coords) {
"use strict";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//var uInt8Array = new Uint8Array(imgData);
var uInt8Array = imgData;
var i = uInt8Array.length;
var binaryString = [i];
while (i--) {
binaryString[i] = String.fromCharCode(uInt8Array[i]);
}
var data = binaryString.join('');
var base64 = window.btoa(data);
var img = new Image();
img.src = "data:image/png;base64," + base64;
img.onload = function () {
console.log("Image Onload");
ctx.drawImage(img, coords[0], coords[1], canvas.width, canvas.height);
};
img.onerror = function (stuff) {
console.log("Img Onerror:", stuff);
};
}
I am using jspdf to convert an image into a PDF.
I have converted the image into a URI using base64encode. But the problem is that there are no errors or warnings shown in the console.
A PDF is generated with the text Hello World on it but no image is added in it.
Here is my code.
function convert(){
var doc = new jsPDF();
var imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg');
console.log(imgData);
doc.setFontSize(40);
doc.text(30, 20, 'Hello world!');
doc.output('datauri');
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
}
This worked for me in Angular 2:
var img = new Image()
img.src = 'assets/sample.png'
pdf.addImage(img, 'png', 10, 78, 12, 15)
jsPDF version 1.5.3
assets directory is in src directory of the Angular project root
Though I'm not sure, the image might not be added because you create the output before you add it. Try:
function convert(){
var doc = new jsPDF();
var imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg');
console.log(imgData);
doc.setFontSize(40);
doc.text(30, 20, 'Hello world!');
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
doc.output('datauri');
}
maybe a little bit late, but I come to this situation recently and found a simple solution, 2 functions are needed.
load the image.
function getImgFromUrl(logo_url, callback) {
var img = new Image();
img.src = logo_url;
img.onload = function () {
callback(img);
};
}
in onload event on first step, make a callback to use the jspdf doc.
function generatePDF(img){
var options = {orientation: 'p', unit: 'mm', format: custom};
var doc = new jsPDF(options);
doc.addImage(img, 'JPEG', 0, 0, 100, 50);}
use the above functions.
var logo_url = "/images/logo.jpg";
getImgFromUrl(logo_url, function (img) {
generatePDF(img);
});
No need to add any extra base64 library. Simple 5 line solution -
var img = new Image();
img.src = path.resolve('sample.jpg');
var doc = new jsPDF('p', 'mm', 'a3'); // optional parameters
doc.addImage(img, 'JPEG', 1, 2);
doc.save("new.pdf");
You defined Base64? If you not defined, occurs this error:
ReferenceError: Base64 is not defined
I find it useful.
var imgData = 'data:image/jpeg;base64,verylongbase64;'
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, "Octonyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);
http://mrrio.github.io/jsPDF/
The above code not worked for me.
I found new solution :
var pdf = new jsPDF();
var img = new Image;
img.onload = function() {
pdf.addImage(this, 10, 10);
pdf.save("test.pdf");
};
img.crossOrigin = "";
img.src = "assets/images/logo.png";
I had the same issue with Base64 not being defined. I went to an online encoder and then saved the output into a variable. This probably is not ideal for many images, but for my needs it was sufficient.
function makePDF(){
var doc = new jsPDF();
var image = "data:image/png;base64,iVBORw0KGgoAA..";
doc.addImage(image, 'JPEG', 15, 40, 180, 160);
doc.save('title');
}
if you have
ReferenceError: Base64 is not defined
you can upload your file here you will have something as :
data:image/jpeg;base64,/veryLongBase64Encode....
on your js do :
var imgData = 'data:image/jpeg;base64,/veryLongBase64Encode....'
var doc = new jsPDF()
doc.setFontSize(40)
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160)
Can see example here
First you need to load the image, convert data, and then pass to jspdf (in typescript):
loadImage(imagePath): ng.IPromise<any> {
var defer = this.q.defer<any>();
var img = new Image();
img.src = imagePath;
img.addEventListener('load',()=>{
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL('image/jpeg');
defer.resolve(dataURL);
});
return defer.promise;
}
generatePdf() {
this.loadImage('img/businessLogo.jpg').then((data) => {
var pdf = new jsPDF();
pdf.addImage(data,'JPEG', 15, 40, 180, 160);
pdf.text(30, 20, 'Hello world!');
var pdf_container = angular.element(document.getElementById('pdf_preview'));
pdf_container.attr('src', pdf.output('datauristring'));
});
}
For result in base64, before convert to canvas:
var getBase64ImageUrl = function(url, callback, mine) {
var img = new Image();
url = url.replace("http://","//");
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function () {
var canvas = document.createElement("canvas");
canvas.width =this.width;
canvas.height =this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL(mine || "image/jpeg");
callback(dataURL);
};
img.src = url;
img.onerror = function(){
console.log('on error')
callback('');
}
}
getBase64ImageUrl('Koala.jpeg', function(img){
//img is a base64encode result
//return img;
console.log(img);
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(30, 20, 'Hello world!');
doc.output('datauri');
doc.addImage(img, 'JPEG', 15, 40, 180, 160);
});
In TypeScript, you can do:
private getImage(imagePath): ng.IPromise<any> {
var defer = this.q.defer<any>();
var img = new Image();
img.src = imagePath;
img.addEventListener('load',()=>{
defer.resolve(img);
});
return defer.promise;
}
Use the above function to getimage object. Then the following to add to pdf file:
pdf.addImage(getImage(url), 'png', x, y, imagewidth, imageheight);
In plain JavaScript, the function looks like this:
function (imagePath) {
var defer = this.q.defer();
var img = new Image();
img.src = imagePath;
img.addEventListener('load', function () {
defer.resolve(img);
});
return defer.promise;
};