Skip to content Skip to sidebar Skip to footer
Home / Canvas / Javascript

Copy A Part Of Canvas To Image

Post a Comment
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')

Solution 1:

You could accomplish 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 datavarImageData = ctx.getImageData(25, 25, 150, 150);

// create image elementvarMyImage = newImage();
MyImage.src = getImageURL(ImageData, 150, 150);

// append image element to bodydocument.body.appendChild(MyImage);

functiongetImageURL(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
}
<canvasid="MyCanvas"width="200"height="200"></canvas>

apology for not giving explanation

Solution 2:

Ok let's give that proposal.

<!DOCTYPE html><html><head></head><body><buttonid='crop'>Crop Canvas</button><hr/><canvasid='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 = newImage();
      image.src = croppedCan.toDataURL();
      // Put the image where you need to.document.getElementsByTagName('body')[0].appendChild(image);
      return image;
    });
  })();

  functioncrop(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><buttonid='crop'>Crop Canvas</button><hr/><canvasid='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 = newImage();
      image.src = croppedCan.toDataURL();
      // Put the image where you need to.document.getElementsByTagName('body')[0].appendChild(image);
      return image;
    });
  })();
  
  functioncrop(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>

Post a Comment for "Copy A Part Of Canvas To Image"