i'm currently trying to load a base64 img into my canvas
console.log('Change');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = stack[1].save;
stack[1].save contains a valid base64 png img URL('data:image/png;base64,xxxxxx'), when i paste this URL into my browser i can see a valid img
The fact is that nothing changes and i dont have any error
If you could help me this will be awesome, thank's
Yes the code you have shared should work OK.
Here is an example
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
var image = new Image();
image.onload = () => { ctx.drawImage(image, 0, 0) }
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAF0lEQVR42mNk+M9AFGAcVTiqcFQhCAAAf0sUAaSRMCEAAAAASUVORK5CYII="
var image2 = new Image()
image2.onload = () => { for(i=1; i<9; i++) ctx.drawImage(image2, 30*i, 5+4*i) }
image2.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="
<canvas id="canvas"></canvas>
The only thing that could be wrong is that stack[1].save that you are using...
Related
I am trying to get the base64 of some images in Javascript and was using this function:
function getBase64Image(img) {
return new Promise((data) => {
var canvas = document.createElement("canvas");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
data(canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg|jpeg);base64,/, ""))
})
}
Then I call the function to load in the image using:
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function () {
getBase64Image(this).then(data => {})
}
img.src = wha[1][0]
If I look at the naturalWidth of the image (96px), it is different from the actual image itself (640px). I had been looking at other methods of getting base64 from an image but they also return the same results.
I am trying to create PDF with Image. I have URL of Image as below:
var url = "https://firebasestorage.googleapis.com/v0/b/dicom-poc.appspot.com/o/images%2FNiouCzjBYna8Wx1VO2x3UST5tDc2%2F2020-10-07%2F05%3A03%3A58%2Fvisualization%2FL-CC.png?alt=media&token=dce8859a-3427-432b-8176-590e9569aad9"
and my code is here:
var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
var dataURL = canvas.toDataURL('image/png')
var base64 = dataURL.replace(/^data:.+;base64,/, '');
pdf.text("Hi");
pdf.addImage(base64,'PNG',5,5,50,50);
pdf.save("download.pdf");
}
After running above code PDF is getting downloaded successfully with text "Hi" but image is not there.
I have tried multiple solutions suggested by people but no result.
Could you please guide me for same.
Thanks in advanace!
You did not draw anything on the canvas.
var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, img.width, img.width);
var dataURL = canvas.toDataURL('image/png')
var base64 = dataURL.replace(/^data:.+;base64,/, '');
pdf.text("Hi");
pdf.addImage(base64,'PNG',5,5,50,50);
pdf.save("download.pdf");
}
Result convert is null png image, pls help me
var img = new Image();
img.src = 'http://advs.jp/cp/barcode/code128.cgi?nt=1&height=80&c=Z103B5-190-311378&.png';
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataurl = canvas.toDataURL().replace("data:image/jpeg;base64,", "");
localStorage.setItem("img", dataurl);
$('#bannerImg').attr('src', dataurl);
<img id="bannerImg" src="" alt="Banner Image" width="100%" height="200px" alt="Embbed Image"/>
<canvas id="myCanvas"></canvas>
You have to include everything (drawing to canvas + reading from it + setting this elsewhere) in the onload event of the image. It doesn't work on this snippet (the call to toDataURL) due to a cross-domain issue, but it shall work on your website.
An explanation of why it doesn't work here the call to toDataURL
var imgCanvas = function() {
var img = new Image();
//Wait for image to load before doing something with content
img.onload = function() {
var canvas = document.getElementById("myCanvas");
//Set canvas size to fit the image
canvas.style.height = img.height + 'px';
canvas.style.width = img.width + 'px';
//Draw the image in canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
//Get a dataurl representation of the image where the image itself is in BASE64
var dataurl = canvas.toDataURL();
//Store it in localStorage
localStorage.setItem("img", dataurl);
//Show image from localStorage
//Need jQuery to use this line instead of next one : $('#bannerImg').attr('src', localStorage.getItem("img"));
document.getElementById('bannerImg').setAttribute('src', localStorage.getItem("img"));
};
img.src = 'http://advs.jp/cp/barcode/code128.cgi?nt=1&height=80&c=Z103B5-190-311378&.png';
};
imgCanvas();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Canvas:<br>
<canvas id='myCanvas'></canvas>
<br><br>
Image from dataurl:<br>
<img id='bannerImg'>
Use document.getElementById('bannerImg').setAttribute('src', dataurl); instead.
var showImage = function() {
var img = new Image;
img.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataurl = canvas.toDataURL();
localStorage.setItem("img", dataurl);
document.getElementById('bannerImg').setAttribute('src', dataurl);
};
img.src = 'http://advs.jp/cp/barcode/code128.cgi?nt=1&height=80&c=Z103B5-190-311378&.png';
};
showImage();
Example: https://jsfiddle.net/atg5m6ym/6152/
I inserted a canvas element into the DOM of a new file with the following code:
$('#nav_steps').html(canvas);
I want to select this canvas to do something with it, but I can't. Can you help me? Thanks.
data.forEach(function(data) {
var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = w_notepad;
canvas.height = h_notepad;
$(canvas).toggle(!data.isActive).appendTo('#canvas_panel');
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0, w_notepad, h_notepad);
};
img.src = data.dataImageURL;
});
i want :
$("canvas:eq(0)");
Thank.
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