admin管理员组

文章数量:1353252

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.

  • javascript
  • canvas
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
Add a ment  | 

2 Answers 2

Reset to default 8

You 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>

本文标签： javascriptCopy a part of canvas to imageStack Overflow

版权声明：本文标题：javascript - Copy a part of canvas to image - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743927886a2563301.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。