I want to have an image inside a canvas element. The canvas will have static size (e.g 800x600) but the Image can be larger or smaller. So if the Image is smaller there will be white area round the image, if it is larger the image will not fit the canvas so some parts of the image won't be visible. What i want to ask is the following. Can I resize the image to fit canvas (e.g after user input) after the image has rendered on canvas?
html
<canvas id="myCanvas" width="800" height="600">
js
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
image = new Image();
image.src = 'url_to_image';
//lets say image is 400x300;
//will this work too?
image.width = image.width*2;
image.height = image.height * 2;
context.drawImage(image, 0, 0);
//or should i use this?
//context.drawImage(image, 0, 0, image.width*2, image.height * 2);
The second one stretches the image to fit the canvas. Can I stretch the image before calling drawImage (by editing image.width and image.height)? I have seen some editing software that zooms on the image and canvas stays static, without changing its size.
Not correct:
image.width = image.width*2;
image.height = image.height * 2;
context.drawImage(image, 0, 0);
as image's width and height properties are read-only.
Correct:
context.drawImage(image, 0, 0, image.width*2, image.height * 2);
Here is another way to make the image fit the canvas independent on aspect ratio:
Simulation background-size: cover in canvas
Related
I m drawing text content on the canvas which is dynamically generated but I cant able to estimate the height the content occupies within the canvas as resetting the canvas height will reset the canvas. How can I resize the canvas based on the height of the content it draws so that the content is accumulated exactly.
Presenting complex tabular text as an inaccesible canvas image is a terrible usability mistake. However if you must you can use the table as an image. You can get the with and height of the image and set the size of your canvas. Finaly you draw the image on the canvas.
var img = new Image();
img.src = whatever;
img.onload = function() {
//get the with and height of the image
var w = img.width;
var h = img.height;
// set the canvas width and height
canvas.width = w;
canvas.height= h;
// draw the image
ctx.drawImage( img, 0, 0, w, h );
I'm using the below code to set the good quality image as background for canvas. If I set the image directly as background, it was working. But the image quality isn't good. So I'm using another canvas to have a good quality image and then I need to set as background. I'm using fabricjs
var _img = new Image();
_img.src = img_base64;
var ctx = canvas.getContext("2d");
_img.onload = function(){
// set size proportional to image
canvas.height = canvas.width * (_img.height / _img.width);
// resize to 50%
var oc = document.createElement('canvas'),
octx = oc.getContext('2d');
oc.width = _img.width * 0.5;
oc.height = _img.height * 0.5;
octx.drawImage(_img, 0, 0, oc.width, oc.height);
octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 0, 0, canvas.width, canvas.height);
// Should be an instance of fabric.image
var imgInstance = new fabric.Image(ctx, {
width: canvas.width,
height: canvas.height
});
console.log(imgInstance);
canvas.setBackgroundImage(imgInstance, canvas.renderAll.bind(canvas), {
width: canvas.width ,
height: canvas.height,
/*originX: 'left',
originY: 'top'*/
// Needed to position backgroundImage at 0/0
});
};
The error is
Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap
I'm using base64 actually. but for the fiddle, I'm using direct path
Here is the Fiddle
Edit : I see the image rendering in my local, But I need to set it as background.
The only reason why an image quality may not be good is because there is an high downscale/upscale factor.
Downscaling is good with image and css elements, while is bad when done on drawImage on the canvas, since the canvas use a nearest neighbour resize.
Other than that, quality of the image is preserved.
Fabricjs try to help on this offering resize filters.
You can apply a resize filter to an image when you load it so that then you work with an image of the dimension you need and that match 1:1 your canvas pixels.
Be aware that then if you export in higher resolution you will not get back the original quality of the image.
I am making a website which will load some blueprint images on a canvas.
but the images are vary in height and width.i Would like to make the canvas scaling equal to the uploaded image scale. How do i code to make the canvas width and height changeble respective to uploaded image.
This done in html5
If I understand you correctly, you want to load images with various dimensions. According to the dimension, set the width / height of the canvas and draw the image?
In that case you could add an eventListener to the image. Once it's loaded, get the width and height. Use those to set the dimensions of the canvas. After that, draw the image on the canvas.
var image = new Image();
image.addEventListener('load', function(e) {
var width = image.width;
var height = image.height;
var canvas = document.querySelector('canvas');
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
});
image.src = 'https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png';
<canvas></canvas>
Fiddle
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'images/e1.jpg';
canvas.width = imageObj.naturalWidth;
canvas.height = imageObj.naturalHeight;
this also works
Hi want to resize an image using canvas but can't get it to work...
I want the image to be 100px * 100px, is there any way to solve this?
I have tried googleing and trying but can't get it to work...
I also tried changing the img size in css but this doesn't help either, please help me!
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to guess the
// original format, but be aware the using "image/jpg" will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
I also realized that I need to rotate it how can I do this?
You have to get a ratio of the width and apply it to the height.
var ratio = 100 / img.width; // 100 for desired width in px
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(img, 0,0, canvas.width, canvas.height);
typed on phone so forgive small mistakes.
I am getting pixels values from an image using canvas. The image size is 170*170 pixels. Here is my code:
var canvas = document.createElement("canvas");
canvas.style.width = img.width;
canvas.style.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var pixelData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height).data;
It works well, I have values in pixelData, until I reach pixelData[102000]... I've test it with a white image, and all the values from pixelData[0] to pixelData[101999] are 255, but then it is 0 until the end...
Somebody sees why? Maybe this is about canvas width and height?
Your canvas size is not what you think it is.
You are only setting the size of the canvas element not the canvas bitmap:
canvas.style.width = img.width;
canvas.style.height = img.height;
This means your bitmap is actually 300 x 150 pixels in size, the default size, and you're just scaling that to the size of the image (since it's all white you won't be able to detect this so easily).
Since your image is 170 x 170 pixels you will only paint part of the canvas leaving the rest to default RGBA value [0,0,0,0].
In order to properly set the size of the canvas you must edit the above mentioned lines to be:
canvas.width = img.width;
canvas.height = img.height;