Question

我正在尝试将画布下载为图像。我的画布高度是500px，宽度也是500px但是我想用700px下载图像而不改变画布尺寸。

我的代码如下：

    <div class="surface">
     <canvas id="myCanvas" height="500" width="500"></canvas>
    </div>

<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', myCanvas.toDataURL());" download="MyImage.png" href="#" target="_blank" class="btn btn-danger">Download</a>

上面的代码是下载500px高度和宽度的图像，但我需要700px或任何自定义尺寸的图像而不更改画布大小。

有没有办法将任何画布作为具有自定义尺寸的图像下载，而不调整画布大小？

Answer 1

canvas元素（toDataURL()和toBlob()）的任何内置导出方法都没有大小参数。
但是，您可以非常轻松地编写自己的实现：

正如评论中提到的markE，ctx.drawImage( )可以选择调整绘制的图片ctx.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight);的大小。
您还可以将canvas元素作为其第一个image参数传递。

然后你可以这样写：

＆＃13;

canvas.resizeAndExport = function(width, height){
  // create a new canvas
  var c = document.createElement('canvas');
  // set its width&height to the required ones
  c.width = width;
  c.height = height;
  // draw our canvas to the new one
  c.getContext('2d').drawImage(this, 0,0,this.width, this.height, 0,0,width, height);
  // return the resized canvas dataURL
  return c.toDataURL();
  }

// draw a simple rectangle for the example
canvas.getContext('2d').fillRect(0,0,50,200);
// create an image that will get our resized export as src
var img = new Image();
img.src = canvas.resizeAndExport(40, 40);
document.body.appendChild(img);

＆＃13;

img, canvas{border: 1px solid}

＆＃13;

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

＆＃13;

Answer 2

通常，您必须使用自定义尺寸创建另一个画布，重新应用为主要画布运行的所有绘图说明，然后调用toDataURL()。

function draw(context){
  // wrap your drawing instructions in a function
  // it will accept a canvas context as input and will draw on it
  // this can be reused for the main and the custom canvas
}

function downloadCanvas(width, height){
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  // re-apply all the drawing instructions to this context
  draw(context);

  // now export the data from this canvas
  return canvas.toDataURL();
}

Answer 3

您可以使用getImageData()方法获取具有特定宽度和高度的ImageData对象。您可以为它指定起点（x和y）。

获得ImageData对象后，创建一个内容canvas对象，其宽度和高度与ImageData对象相同，并使用putImageData()方法将其绘制到画布。然后使用toDataURL()方法获取画布的dataUrl。

样品：

var imgData = ctx.getImageData(x, y, width, height);

var tc = document.createElement('canvas');
tc.width = imgData.width;
tc.height = imgData.height;
var tctx = tc.getContext('2d');
tctx.putImageData(imgData, 0, 0);
console.log(tc.toDataURL('image/png'));

这是小提琴：http://jsfiddle.net/k7moorthi/eb51c088/

<强>学分：

downloadURI - owencm

是否可以下载画布作为自定义尺寸的图像？

3 个答案: