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
Related
I have the following html file which draws an image on the canvas.
<canvas id="canvas"width="800"height="800"></canvas>
<script>
var canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let img = new Image()
img.src = 'https://clipartspub.com/images/circle-clipart-blue-1.jpg'
img.onload = function(){
ctx.drawImage(img,300,300,300,300)
}
</script>
It works fine, however I would like to instead draw a cropped version of this image, for example, the bottom right quarter of the image. Is this possible?
You have to use the below implementation of drawImage to achieve that
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Check the docs here
var canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let img = new Image();
img.src = "https://clipartspub.com/images/circle-clipart-blue-1.jpg";
img.onload = function () {
const width = img.width;
const height = img.height;
ctx.drawImage(
img, // Source image
width / 2, // Start at this x of image
height / 2, // Start at this y of image
width / 2, // Till this width of image
height / 2, // Till this height of image
0, // Start at this x of canvas
0, // Start at this y of image
300, // Till this width of canvas
300 // // Till this height of canvas
);
};
<canvas id="canvas"width="800"height="800"></canvas>
You can also use canvas.width and canvas.height in the canvas values used above for a better scaled result.
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 );
My canvas is 500px x 500px.
I have a png image that is 500px x 500px:
I want to re-size the image to be say... 100px x 100px, and then use that re-sized image as part of defining a repeat pattern and then using that as a fillStyle to repeat across the whole canvas. This is what I do...
//...define canvas, ctx, width and height above
var image = new Image();
image.onload = function() {
_self = this;
drawBG();
}
image.src = 'img.png';
function drawBG() {
var space = ctx.createPattern(_self, 'repeat');
ctx.fillStyle = space;
ctx.fillRect(0, 0, width, height);
}
Now, this is all well and good if I want to waste my own time. See, the space image is the same size as the canvas. My question is... How do you first resize the original image(in javascript) to then later create a pattern with it?
P.S. How do you re-size an image on stack overflow? This image I have showing here is to big for it's purpose.
You can draw your image on a second offscreen canvas, with drawImage(img, x, y, resizedWidth, resizedHeight) and then use this canvas as pattern.
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
// create an off-screen canvas
var patt = document.createElement('canvas');
// set the resized width and height
patt.width = 50;
patt.height = 50;
patt.getContext('2d').drawImage(this, 0,0, patt.width, patt.height);
// pass the resized canvas to your createPattern
drawBG(patt);
}
image.src = 'http://lorempixel.com/500/500';
function drawBG(patternCanvas) {
var space = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = space;
ctx.fillRect(0, 0, 400, 200);
}
<canvas id="canvas" width="500" height="250"></canvas>
I need to create Canvas element with image and need to append to parent for this i have done this
<html>
<head>
<script>
window.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
canvas.id = "canvas_id";
canvas.setAttribute("class" ,"canvas");
canvas.height = "400";
canvas.width = "800";
var image = new Image();
image.src = "http://localhost/tile.png";
image.onload = function(){
context.drawImage(image, canvas.width, canvas.height);
}
document.body.appendChild(canvas);
}
</script>
</head>
<body>
</body>
</html>
it give blank canvas
can somebody guide me ?
You are using drawImage() the wrong way. Instead of drawing the image at (0,0) you are drawing it just outside the canvas area as width and height is where position normally goes.
The valid signatures are:
context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Where dx and dy are delta position (relative to origin, normally (0,0) when untranslated). Without width and height specified drawImage() will by default use the image's natural width and height.
The second version allows to override the default size, and the third will allow you to draw from one region to another.
Source
Corrected example:
window.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
canvas.id = "canvas_id";
canvas.className = "canvas"; // should be className
canvas.height = 400; // should be numbers
canvas.width = 800;
var image = new Image();
image.onload = function() {
// or set canvas size = image, here: (this = currently loaded image)
// canvas.width = this.width;
// canvas.height = this.height;
context.drawImage(this, 0, 0); // draw at (0,0), size = image size
// or, if you want to fill the canvas independent on image size:
// context.drawImage(this, 0, 0, canvas.width, canvas.height);
}
// set src last (recommend to use relative paths where possible)
image.src = "http://lorempixel.com/output/fashion-q-c-800-400-7.jpg";
document.body.appendChild(canvas);
}
That being said, if you only need the image appended there is no need to go via canvas. Just add the image to DOM directly (I assume this is not you want, but just in case..):
var image = new Image();
image.src = "tile.png";
document.body.appendChild(image);
This is my take on it... You need to indicate the coordinates where you want to start drawing (i.e. 0, 0) and - optionally - you can specify how big (wide, height) the canvas is to be.
In my case, I make the canvas to be as big as the image (instead of an arbitrary 400x800) you may need to update that your suit your requirements.
I added some css to show how big the canvas is in relation to the image. You can update/remove that as well depending on your needs.
UPDATED
It uses an hidden image as the source.
I hope this will work for you.
window.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
canvas.id = 'canvas_id';
canvas.setAttribute("class", "canvas");
var image = new Image();
image.src = 'http://placekitten.com/g/200/300';
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
document.body.appendChild(canvas);
}
.canvas {
border: solid red 1px;
}
<html>
<body>
</body>
</html>
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.