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;
}
Related
If I have an image in base64 ex.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDAAwfqNRk/rjcYX+PxrV/wtWqwJSTlboMgAAAABJRU5ErkJggg==
What's the fastest way to change a filter (ex. brightness, contrast) programmatically and without creating any img or canvas tag in the view? Then once changed, convert it back to a base64 url?
You can do this by putting the image onto a HTML canvas with filters applied, then turning that canvas back into a base64 URL.
Since you never add the canvas to the document, it will never be seen.
This is how you would do it asynchronously:
This takes about 1-10ms
function applyFiltersToImage(imageURL, callBack) {
// load the image url into an image object
const image = new Image();
image.src = imageURL;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
// apply css filters here
ctx.filter = 'brightness(0.5) contrast(2)';
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// turn canvas back into a base64 image URL
callBack(canvas.toDataURL("image/png"));
}
}
You could do it synchronously if you already have the Image instance loaded.
This is how you will do it synchronously:
function applyFiltersToImageSync(imageObject) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
canvas.width = imageObject.width;
canvas.height = imageObject.height;
// apply css filters here
ctx.filter = 'brightness(0.5) contrast(2)';
ctx.drawImage(imageObject, 0, 0, canvas.width, canvas.height);
//turn canvas back into a base64 image
return canvas.toDataURL("image/png");
}
Converting image to the canvas with canvas.drawImage fails(but not throws err), the canvas looks transparent empty image
It doesn't happen for all image files I could not figure out which property of the image causes this but I uploaded an example photo with this issue
I started having this problem with chrome v83-v84
firefox works fine.
I want to upload a specified photo (its inside fiddle) and want to make canvas and draw canvas from the uploaded image and display it on chrome (chrome version should bigger or equal v85)
function testimg(src) {
var img = document.createElement("img");
img.src = src;
document.querySelector('#test').appendChild(img)
}
$('#file').on('change', fileAdded)
function fileAdded(event) {
var reader = new FileReader;
reader.onload = function () {
var image = new Image();
image.src = reader.result;
image.onload = function () {
document.querySelector('#test').appendChild(this)
var imgToSend = processImg(this, this.width, this.height);
testimg(imgToSend)
};
};
reader.readAsDataURL(event.currentTarget.files[0]);
}
function processImg(image, srcWidth, srcHeight) {
var canvas = document.createElement('canvas');
canvas.width = srcWidth;
canvas.height = srcHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
ctx.fill();
return canvas.toDataURL();
}
https://jsfiddle.net/msacar/2Lgmc85t/24/
I have a base64 image string, I have created a canvas and put the base64 with the image and have given canvas height as 481 and width as 650, when I tried to display the image in html, image is coming but it is not completely filling the canvas,
Can anyone please tell me some solution to fill the image within the entire canvas, no matter what the quality of the picture.
My code is as given below
JSFiddle
var base64 = "data:image/jpeg;base64,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";
var canvas = document.createElement('canvas');
canvas.width = 650;
canvas.height = 481;
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0);
};
image.src = base64;
$('#showImage').html(canvas);
Change your onload function body to
ctx.drawImage(image, 0, 0, 650, 481);
Set the size of the canvas using natural width/height after the image has loaded:
var base64 = "data:image/jpeg;base64,/9j/4AAQSkZJ.....";
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function () {
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
};
image.src = base64;
$('#showImage').html(canvas);
I want to use the (pica library) for image resize, but it asks me for a Uint8Array and i only have an Image object with the
src = 'data:image/jpeg;base64,/9j/4AAQ...'
I have no idea how to turn this into a Uint8Array, any thoughts?
Thanks
You will need to apply the image to a canvas and use getImageData().
Here's a simple example of how it can be done:
//create canvas, set base64 test img
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
base64 = 'data:image/jpeg;base64...'; //base64 string
//size canvas
canvas.width = 34,
canvas.height = 34;
//create image, set src to base64 and onload draw to canvas
var image = new Image();
image.onload = (function(canvas, ctx){
return function(){
ctx.drawImage(this, 0, 0);
//now we can finally get a Uint8ClampedArray
var imageData = ctx.getImageData(0, 0, 34, 34);
console.log(imageData.data);
};
})(canvas, ctx);
image.src = base64;
jsfiddle
I'm trying to crop a image using ctx.drawImage() and get the cropped image data using canvas.toDataURL(). However I can't get the right data until I refresh the page few times. I want to know how can I get the cropped image data immediately instead of refresh the page.
<script>
var imageObj = new Image();
imageObj.src = 'http://localhost:63342/war/img/IMG_20140131_102234.jpg';
var canvas = document.createElement('canvas');
canvas.width = 30;
canvas.height = 30;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(imageObj, 0, 0, 715, 715, 0, 0, 30, 30);
// Get the data-URL formatted image
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
</script>
When I first open the page the data I got are :
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAPklEQVRIS+3TsQ0AMAgEMdh/afr0D0XMACBZR9fR9NHdcnhNHjXqmIC4YrTvYtSoYwLiitH6Y3GJKybwX1wD6fcAH1bniBkAAAAASUVORK5CYII=
These data are much smaller than the data I got after I refresh the page few times. I'm really confused why this happened and how to fix the problem.
You need to wait for your image to be loaded. Use the onload event.
The reason it works after a few times is because the browser caches it, and makes it load before you run your toDataURL code.
For example, your code would look like this:
var imageObj = new Image();
imageObj.src = 'http://localhost:63342/war/img/IMG_20140131_102234.jpg';
var canvas = document.createElement('canvas');
canvas.width = 30;
canvas.height = 30;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
imageObj.addEventListener('load', function () {
ctx.drawImage(imageObj, 0, 0, 715, 715, 0, 0, 30, 30);
// Get the data-URL formatted image
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
});