I try to copy a certain part of a canvas, then write the copied part in an image. Here is my (wrong) approach:
var c = document.getElementById('MyCanvas'),
ctx = c.getContext('2d');
var ImageData = ctx.getImageData( 25, 25, 150, 150 );
var MyImage = new Image();
MyImage.src = ImageData ; // <-- This is wrong, but I mean something like this
Do you know how can I do it? Thank you in advance.
ps: I don't want to copy the whole canvas, but a certain part of it.
I try to copy a certain part of a canvas, then write the copied part in an image. Here is my (wrong) approach:
var c = document.getElementById('MyCanvas'),
ctx = c.getContext('2d');
var ImageData = ctx.getImageData( 25, 25, 150, 150 );
var MyImage = new Image();
MyImage.src = ImageData ; // <-- This is wrong, but I mean something like this
Do you know how can I do it? Thank you in advance.
ps: I don't want to copy the whole canvas, but a certain part of it.
Share Improve this question edited Jul 21, 2017 at 10:12 user3815508 asked Jul 21, 2017 at 9:49 user3815508user3815508 3996 silver badges20 bronze badges 2- Duplicated: stackoverflow./questions/10257781/… – Quentin Commented Jul 21, 2017 at 9:57
- Please take a closer look: NOT the entire canvas, but a certain part of it. The mand "canvas.toDataURL()" refers to the whole canvas. So your link is for "entire canvas". – user3815508 Commented Jul 21, 2017 at 10:07
2 Answers
Reset to default 8You could acplish that in the following way ...
var c = document.getElementById('MyCanvas');
var ctx = c.getContext('2d');
// draw rectangle
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = '#07C';
ctx.fillRect(25, 25, 150, 150);
// get image data
var ImageData = ctx.getImageData(25, 25, 150, 150);
// create image element
var MyImage = new Image();
MyImage.src = getImageURL(ImageData, 150, 150);
// append image element to body
document.body.appendChild(MyImage);
function getImageURL(imgData, width, height) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.putImageData(imgData, 0, 0);
return canvas.toDataURL(); //image URL
}<canvas id="MyCanvas" width="200" height="200"></canvas>apology for not giving explanation
Ok let's give that proposal.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='crop'>Crop Canvas</button>
<hr/>
<canvas id='myCanvas'></canvas>
<hr/>
<script>
(function() {
var can = document.getElementById('myCanvas');
var w = can.width = 400;
var h = can.height = 200;
var ctx = can.getContext('2d');
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
var btn = document.getElementById('crop');
btn.addEventListener('click', function() {
var croppedCan = crop(can, {x: 0, y: 0}, {x: 80, y: 100});
// Create an image for the new canvas.
var image = new Image();
image.src = croppedCan.toDataURL();
// Put the image where you need to.
document.getElementsByTagName('body')[0].appendChild(image);
return image;
});
})();
function crop(can, a, b) {
var ctx = can.getContext('2d');
var imageData = ctx.getImageData(a.x, a.y, b.x, b.y);
var newCan = document.createElement('canvas');
newCan.width = b.x - a.x;
newCan.height = b.y - a.y;
var newCtx = newCan.getContext('2d');
newCtx.putImageData(imageData, 0, 0);
return newCan;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='crop'>Crop Canvas</button>
<hr/>
<canvas id='myCanvas'></canvas>
<hr/>
<script>
(function() {
var can = document.getElementById('myCanvas');
var w = can.width = 400;
var h = can.height = 200;
var ctx = can.getContext('2d');
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
var btn = document.getElementById('crop');
btn.addEventListener('click', function() {
var croppedCan = crop(can, {x: 0, y: 0}, {x: 80, y: 100});
// Create an image for the new canvas.
var image = new Image();
image.src = croppedCan.toDataURL();
// Put the image where you need to.
document.getElementsByTagName('body')[0].appendChild(image);
return image;
});
})();
function crop(can, a, b) {
var ctx = can.getContext('2d');
var imageData = ctx.getImageData(a.x, a.y, b.x, b.y);
var newCan = document.createElement('canvas');
newCan.width = b.x - a.x;
newCan.height = b.y - a.y;
var newCtx = newCan.getContext('2d');
newCtx.putImageData(imageData, 0, 0);
return newCan;
}
</script>
</body>
</html>