Here is my code. I am uploading a image and using like this :
> var canvas = document.createElement('canvas');
> var context = canvas.getContext('2d');
> context.drawImage(image, 0, 0);
This works fine but if I copy the imagedata like below to another canvas. It loads image partially.
var canvas = document.getElementById('myCanvas');
var context1 = canvas.getContext('2d');
context1.putImageData(context.getImageData(0, 0, image.width, image.height), 0, 0);
I tried same approach by creating two canvas and this code which worked fine but without image.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 300);
var d = document.getElementById("myCanvas1");
var btx = d.getContext('2d');
var imgData = ctx.getImageData(0, 0, 300, 300);
btx.putImageData(imgData, 0, 0);
If i create two canvas it works fine but not like the above where I am using in memory canvas.
My HTML file has this :
<canvas id="myCanvas" width="960" height="960"></canvas>
<canvas id="myCanvas1" width="960" height="960"></canvas>
When you create canvases, you need to set their width manually. Default canvas size is 300x150. From here HTMLCanvasElement.
Something like this:
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
To copy one canvas to another use drawImage rather than getImageData, setImageData That way you will use the GPU to move the pixels rather than the CPU. You also have the option to resize, crop, and apply a variety of FXs.
// create a copy of canvasSource
// returns the newly created canvas.
function copyCanvas(canvasSource){
var canvasCopy = document.createElement("canvas");
canvasCopy.width = canvasSource.width;
canvasCopy.height = canvasSource.height;
canvasCopy.getContext("2d").drawImage(canvasSource, 0, 0);
return canvasCopy;
}
Related
My canvas is 512x256 pixels
Here is what I am trying to achieve :
Print a local image (image 1) on the canvas.
Fill this image with a specific color.
Print another local image(image 2) that should not overlap image 1.
So what I did is :
.drawImage(image1)
Create a rectangle of 512x256 ( ctx.rect(0, 0, 512, 256); )
ctx.globalCompositeOperation = "destination-in";
draw this rectangle ( ctx.fill() ) (with destination-in it should have for effect to fill the first image with the color of the rectangle)
ctx.globalCompositeOperation = "destination-out";
.drawImage(image2) (with destination-out it should make this image under the image 1)
But it doesn't display anything.
I figured it was because we can't have different globalCompositeOperation... But I'm sure it's possible somehow, I found people talking about it and fixing the issue but they're using specific code for their specific task and I simply don't understand. I would love an example for my script :
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img1 = new Image();
img1.onload = function () {
ctx.drawImage(img1, 0, 0);
};
ctx.globalCompositeOperation = "destination-in";
ctx.rect(0, 0, 512, 256);
ctx.fillStyle = "green";
ctx.fill()
ctx.globalCompositeOperation = "destination-out";
img2.onload = function () {
ctx.drawImage(img2, 0, 0);
};
img1.src = "C:/Users/... file1.png" // replaced the path for this example
img2.src = "C:/Users/... file2.png";
</script>
And here is my html body :
<body>
<canvas id="canvas" width="512" height="256"></canvas>
</body>
How can I crop an area of an image using JavaScript? As I have read, I must use a canvas to project the image on it.
With the following code I am cutting an area of an image, but the size of the cut area is not the indicated one.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// draw cropped image
var sourceX = 0;
var sourceY = 0;
var sourceWidth = 500;
var sourceHeight = 150;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
<canvas id="myCanvas" style="border:1px solid red"></canvas>
I am trying to represent in this image what I want to do.
my main problem is that the canvas does not adapt to the size of the cropped image and the final height (sourceHeight ) and width (sourceWidth ) They are not the ones I specified
How can i fix it?
The problem
Your source "width" is the same width as the image.
The solution
When using ctx.drawImage with 9 arguments, think of it like a cut and paste.
You want to "cut" the outline in red, and "paste" it to your new - centered - location.
You want to "cut" all the way up to the half way point of the source. So you need to select all the way up to the half way point of the image.
I also suggest maybe changing the variable name from "source" to "crop" (cropX, cropWidth, etc) to better reflect its purpose, as it is not really the width of the "source" anymore.
If you want the image to fill the entire canvas, "paste" it with the canvas' width and height at (0,0)
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.width, canvas.height);
The code
...
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// crop from 0,0, to 250,150
var cropX = 0;
var cropY = 0;
var cropWidth = 250;
var cropHeight = 150;
//resize our canvas to match the size of the cropped area
canvas.style.width = cropWidth;
canvas.style.height = cropHeight;
//fill canvas with cropped image
context.drawImage(imageObj, cropX, cropY, cropWidth, cropHeight, 0, 0, canvas.width, canvas.height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
...
You'll need to tell the canvas the size of the image you're trying to display to ensure the canvas has the desiredWith size;
However, the size of your example image is 438 × 300, which makes it hard to crop to 500px.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://placehold.it/700x700';
imageObj.onload = function() {
const desiredWidth = 500;
const desiredHeight = 150;
canvas.width = desiredWidth;
canvas.height = desiredHeight;
context.drawImage(imageObj, 0, 0, desiredWidth, desiredHeight, 0, 0, desiredWidth, desiredHeight);
console.log(canvas.width, canvas.height);
};
<canvas id="myCanvas" style="border:1px solid red"></canvas>
I have tried to create an HTML page with a full screen canvas and I can draw to this fine. If I create a second "off screen" canvas to draw on and display on the main canvas I do not see anything.
My code is:
var canvas;
var canvas_ctx;
var off_canvas = document.createElement('canvas');
var off_canvas_ctx;
init();
drawTree();
function init() {
canvas = document.getElementById('treeCanvas');
if (canvas.getContext) {
canvas_ctx = canvas.getContext("2d");
window.addEventListener('resize', resizeCanvas, false);
window.addEventListener('orientationchange', resizeCanvas, false);
resizeCanvas();
}
off_canvas.width = 5000;
off_canvas.height = 5000;
off_canvas_ctx = off_canvas.getContext('2d');
}
function resizeCanvas() {
var cWidth = window.innerWidth;
var cHeight = window.innerHeight - 3;
var imgData = canvas_ctx.getImageData(0, 0, cWidth, cHeight);
// Resize original canvas
canvas.width = cWidth;
canvas.height = cHeight;
// Copy back to resized canvas
canvas_ctx.putImageData(imgData, 0, 0);
}
function drawTree() {
canvas_ctx.fillStyle = "#FF0000";
canvas_ctx.fillRect(0, 0, 150, 75);
off_canvas_ctx.fillStyle = "#FF0000";
off_canvas_ctx.fillRect(0, 0, 150, 75);
resizeCanvas();
}
<div align="center">
<canvas id="treeCanvas" width="200" height="100">
Your browser does not support the canvas element.
</canvas>
</div>
My "drawTree()" function currently draws the same thing to both canvas contexts and then calls "resizeCanvas()" in order to update the display.
If I use the line
var imgData = canvas_ctx.getImageData(0, 0, cWidth, cHeight);
in "resizeCanvas()", the rectangle displays but if I try to use the image data from the off screen canvas with the line
var imgData = off_canvas_ctx.getImageData(0, 0, cWidth, cHeight);
then nothing is displayed. Can anyone see what I am doing wrong?
My mistake, in the "init()" function i was calling "resizeCanvas()" before i had got the context to the second canvas, this seemed to mess it up for the rest of the session.
canvas_ctx = canvas.getContext("2d");
off_canvas.width = 5000;
off_canvas.height = 5000;
off_canvas_ctx = off_canvas.getContext('2d');
Moving the block up appears to have fixed the problem.
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>
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);