I've no idea why this doesn't work. The src attribute of the image is changed with the new data, but the image is not actually visible. I tried with several different images. It's just javascript in a browser and Jquery is required.
<body>
<img src="" id="test">
</body>
<script>
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
img.onload = getIt
img.src = 'download.png';
function getIt() {
canvas.width = this.width;
canvas.height = this.height;
const imageData = ctx.getImageData(0, 0, this.width, this.height);
ctx.drawImage(this, canvas.width , canvas.height);
ctx.putImageData(imageData, canvas.width, canvas.height);
$('#test').get(0).src = canvas.toDataURL("image/png");
}
</script>
I tried with several different images, all png. At the moment this is the entire code for the project so I don't foresee anything that could be interfering with it.
The result is this but the image cannot be seen:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAeCAYAAAAhDE4sAAAAMklEQVRIS+3SsQ0A....etc" id="test">
EDIT: It seems like it might be getting the data from the image incorrectly but I've no idea why...I mean why would it get the data but be incomplete or incorrect?
Please try this:
(You don't need to get or put the image data)
Also you were doing this:ctx.putImageData(imageData, canvas.width, canvas.height);. This means that you are drawing the image totally outside the canvas. Do this instead: ctx.putImageData(imageData, 0,0);
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
img.onload = getIt
img.src = "download.png";
function getIt() {
canvas.width = this.width;
canvas.height = this.height;
//draw the image onto the canvas
ctx.drawImage(this, 0,0);
//use the data uri
test.src = canvas.toDataURL("image/png");
}
<img src="" id="test">
Related
I'm trying to create a smaller thumbnail of an image on a canvas.
The thumbnail size I'd like is 200 x 200
According to the documentation it should be as easy as drawImage(img, 0, 0, 200, 200) but I get the same results here is my code:
_canvas = document.createElement('canvas'),
ctx = _canvas.getContext("2d"),
img = new Image();
img.onload = function() {
ctx.drawImage(this, 0, 0, 1200, 600);
var dataURL = _canvas.toDataURL();
// The above creates the first image
//Then while I'm still in the load method I attempt to save another size:
ctx.drawImage(this,0,0,300,300);
var dataThumbURL = _canvas.toDataURL();
}
I save both dataURL and dataThumbURL to the server and both images are the same size.
My assumption is ctx.drawImage could be repeated with just a different size. Any idea how I can achieve this?
The width and height parameters of the drawImage() method do not alter the dimensions of the canvas you draw onto. So if your source image is bigger than the canvas it will simply be cropped.
To have snapshots of different sizes, you need to change the dimensions of the canvas to the desired size prior calling drawImage().
Here's an example:
let image = new Image();
let _canvas = document.createElement('canvas');
let ctx = _canvas.getContext("2d");
image.crossOrigin = "";
image.onload = function() {
let img, dataURL;
_canvas.width = 200;
_canvas.height = 150;
ctx.drawImage(this, 0, 0, _canvas.width, _canvas.height);
dataURL = _canvas.toDataURL();
img = new Image();
document.body.appendChild(img);
img.src = dataURL;
_canvas.width = 40;
_canvas.height = 30;
ctx.drawImage(this, 0, 0, _canvas.width, _canvas.height);
dataURL = _canvas.toDataURL();
img = new Image();
document.body.appendChild(img);
img.src = dataURL;
}
image.src = "https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/200/300";
I want to display an image(dinamically) on the canvas and then reset it.
drawImage() is the function that draws the image on the canvas after its source is loaded.
resetCanvas() is the function that resets/clean the canvas.
var canvas = document.getElementById("Canvas");
const ctx = canvas.getContext("2d");
drawImage("img/earth.jpg");
resetCanvas();
//more code
function resetCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function drawImage(source) {
var img = new Image();
img.onload = function() {
var x = img.width;
var y = img.height;
adjustCanvasSize(x, y);
ctx.drawImage(img,0,0, x, y);
}
img.src = source;
}
When I execute this code, the resetCanvas() is "ignored". I don't want to insert the resetCanvas() inside the onload function of the drawImage() as it actually represents many other distinct functions and instructions that are going to be executed after the drawImage() and it would look wrong.
I was thinking if there was a way of making javascript more patient and stop it from executing anything until the image gets loaded in the drawImage function.
A few comments:
If you reset the canvas after drawing the image you you won't see the image since the resetCanvas function is deleting everything you previously draw on the canvas
There are some problems when working with images in canvas. Please read this article: MDM Using images
Next come my code. I hope it helps.
var canvas = document.getElementById("Canvas");
const ctx = canvas.getContext("2d");
resetCanvas();
drawImage("https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg");
//more code
function resetCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function drawImage(source) {
var img = new Image();
img.onload = function() {
var x = img.width;
var y = img.height;
adjustCanvasSize(canvas,x, y);
ctx.drawImage(img,0,0, x, y);
}
img.src = source;
}
function adjustCanvasSize(canvas, x, y){
canvas.width = x;
canvas.height = y;
}
canvas{border:1px solid;}
<canvas id="Canvas"></canvas>
As far as I can see my code is exactly like the code on W3schools except im making a new image instead of using one already in the html, but i cant get it to display anything
<body>
<center><canvas id="myCanvas" width="1000" height="750"></canvas></center>
<script>
function newImage(src, width, height) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
return img;
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750);
ctx.drawImage(i,0,0);
</script>
The problem appears because you return image object before it is fully downloaded. Because of that canvas fails to render image data as background image.
You should make use of onload callback function and drawImage only when image data is completely available. This should work:
function newImage(src, width, height, callback) {
var img = new Image();
img.width = width;
img.height = height;
img.onload = function () {
callback(img);
};
img.src = src;
}
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d");
newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750, function(image) {
ctx.drawImage(image, 0, 0);
});
Note how instead of returning image from newImage function, you pass callback function in it and invoke it once download complete.
function newImage(src, width, height, callback) {
var img = new Image();
img.width = width;
img.height = height;
img.onload = function () {
callback(img);
};
img.src = src;
}
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d");
newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750, function(image) {
ctx.drawImage(image, 0, 0);
});
<canvas id="myCanvas" width="1000" height="750"></canvas>
I have a canvas with an id called napkin. When I call the following function it is supposed to draw an image and the napkin canvas onto another canvas in memory. It works on every browser but IOS Safari. The operation does not seem to exceed the IOS memory cap for the canvas. I test this by calling k().toDataURL(). Any ideas?
function k() {
var canvas = document.createElement('canvas');
var napkin = document.getElementById("napkin");
var img = new Image();
img.src = picurl;
var ctx = canvas.getContext("2d");
var imgdata = new Image();
imgdata.src = napkin.toDataURL();
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.globalAlpha = 0.5;
ctx.drawImage(imgdata, 0, 0);
return canvas;
}
You need to wait for the image data to load before using it...
var img = new Image();
img.onload = function(){
// do stuff here with img
};
img.src = picurl;
// not here
I'm trying to learn manipulate image and canvas in javascript. I'm wondering why we can not do :
var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg';
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
}
img.src =urlimg ;
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
$('#image1').attr('src', img.src);
And we have to do this :
var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg';
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src =urlimg ;
$('#image1').attr('src', img.src);
Is it due to time of image to load ?
Can I create a canvas from an existing object image ?
Thanks.
Is it due to time of image to load ?
Yes in part, but mostly because image loading is asynchronous so the next lines of code are executed right away while the image is loaded. To let you know an event is raised when it's done.
Can I create a canvas from an existing object image ?
No (not directly), but you can draw the image onto a canvas to initialize it (as you already do):
ctx.drawImage(imageElement, 0, 0, width, height);