I have following code:
var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
};
img.src = 'mwq.gif';
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx2.putImageData(imageData, 0, 0);
and i get image on first canvas element, when i check in console there is imageData, with width, lenght and pixel array, but somehow i can't get that image on another canvas element. I dont think there are typos, i rewrote same code several times, and at the end i stripped it to most minimal version without pixel manipulation, but it's still not working.
Your code isn't called in the onload callback, it's executed before the image is loaded so there is nothing to put.
You could change it to
var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx2.putImageData(imageData, 0, 0);
};
img.src = 'mwq.gif';
Related
i was trying to download the context of the canvas as an image using dataURL() through the following code but it's not working for some reason. However, when i replace the context of the canvas to be something else besides the image it actually works, so can you tell how can i fix this
<a href="#" id="downloader" >Download!</a>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image(60, 45);
image.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
ctx.drawImage(image, 0, -60);
}
image.src = 'image.png';
$('#downloader').click(function(){
$(this).attr('href', document.getElementById('canvas').toDataURL("image/png").replace("image/png", "image/octet-stream"));
$(this).attr('download', "Picture.png");
});
</script>
Your JS should be:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image(60, 45);
//First add src, then set the height and width
image.src = 'image.png';
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
// Draw image from start and not from behind the axis
ctx.drawImage(image, 0, 0);
}
$('#downloader').click(function() {
$(this).attr('href', document.getElementById('canvas').toDataURL("image/png"))
$(this).attr('download', "Picture.png");
});
This is my code:
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 990;
canvas.height = 409;
canvas.style.display='block';
var style=canvas.style;
style.marginLeft="auto";
style.marginRight="auto";
var position=1;
var background = new Image();
background.src="backdrop3.jpg";
var currentImage= new Image();
document.body.appendChild(canvas);
ctx.drawImage(background, 0, 0);
For some reason, nothing appears on my html canvas. Ive already checked that the file for the background is in the same location and it is. What could be the problem?
You need to draw the image onto the canvas after it has loaded, like this:
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 990;
canvas.height = 409;
canvas.style.display='block';
var style=canvas.style;
style.marginLeft="auto";
style.marginRight="auto";
var position=1;
var background = new Image();
background.src="backdrop3.jpg";
// the important bit
background.onload = function () {
ctx.drawImage(background, 0, 0);
}
document.body.appendChild(canvas);
I have a Javascript function that create a canvas, write a image and a text on it. At the and I need the base64 dataUrl but what I get is only a blank canvas.
This is my function:
function createBreadCrumb(label) {
var canvas = document.createElement('canvas');
canvas.width = 25;
canvas.height = 30;
var img = new Image;
img.src = 'map-pin-breadcrumb.png';
var ctx=canvas.getContext("2d");
img.onload = function(){
ctx.drawImage(img, 0, 0);
ctx.font = "11px Arial";
ctx.textAlign="center";
ctx.fillText(label, 12, 16);
};
return canvas.toDataURL();
}
You are calling toDataURL before the image is loaded. As a result, none of your canvas instructions have run yet. Because the image is loaded asynchronously, you cannot get the resulting canvas synchronously and must use a callback or a promise.
Try this.
function createBreadCrumb(label, callback) {
var canvas = document.createElement('canvas');
canvas.width = 25;
canvas.height = 30;
var img = new Image;
var ctx = canvas.getContext("2d");
img.onload = function(){
ctx.drawImage(img, 0, 0);
ctx.font = "11px Arial";
ctx.textAlign="center";
ctx.fillText(label, 12, 16);
callback(canvas.toDataURL());
};
img.src = 'map-pin-breadcrumb.png';
}
createBreadCrumb("hello", function(crumb){
// do your stuff
});
I want to convert the rawImg to base64 and pass it on image.src. I will be needing the base64 dataURL to put effects on my canvas.
Pls see my code below:
function onLoad() {
canvas = document.querySelector("#myCanvas");
context = canvas.getContext("2d");
var image = new Image();
image.onload = function () {
if (image.width != canvas.width)
canvas.width = image.width;
if (image.height != canvas.height)
canvas.height = image.height;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
filterCanvas(imageFilter);
}
var rawImg = "flower.jpg";
imageURL = <-- (convert rawImg to base64.. I dont know what to write here)
image.src = imageURL;
}
Use HTMLCanvasElement.toDataURL(), returns a data URI containing a representation of the image in the format specified by the type parameter(The default type is image/png)
function onLoad() {
canvas = document.querySelector("#myCanvas");
context = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
if (image.width != canvas.width)
canvas.width = image.width;
if (image.height != canvas.height)
canvas.height = image.height;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
filterCanvas(imageFilter);
var imageURL = canvas.toDataURL();
YOUR_IMAGE.src = imageURL; //Select `YOUR_IMAGE` using getElementById/querySelector/...
}
image.src = "flower.jpg";
}
With HTML snippets as:
<canvas id="myCanvas"></canvas>
<span>Resultant data URL: </span><span id="result"></span>
And, updating your javascript code as below:
canvas = document.querySelector("#myCanvas");
context = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
if (image.width != canvas.width)
canvas.width = image.width;
if (image.height != canvas.height)
canvas.height = image.height;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
// filterCanvas(imageFilter);
var imageURL = canvas.toDataURL();
alert(imageURL);
document.querySelector("#result").innerHTML = imageURL;
}
image.src = "flower.jpg";
You will get the resultant base64 string within the #result span element. Please try this.
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);