Question

我尝试复制画布的某个部分，然后将复制的部分写入图像中。这是我的（错误）方法：

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

你知道我该怎么办？提前谢谢。

ps：我不想复制整个画布，但是它的某个部分。

Answer 1

你可以通过以下方式实现这一目标......

＆＃13;

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
}

＆＃13;

<canvas id="MyCanvas" width="200" height="200"></canvas>

＆＃13;

_{道歉没有给出解释}

Answer 2

好的，让我们给出这个提议。

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

将画布的一部分复制到图像

2 个答案: