是否可以将画布下载为具有自定义大小的图像？答案

【问题标题】：Is it possible to download canvas as image with custom size?是否可以将画布下载为具有自定义大小的图像？
【发布时间】：2015-10-09 08:23:45
【问题描述】：

我正在尝试将画布下载为图像。我的画布高度是 500 像素，宽度也是 500 像素，但我想下载 700 像素的图像而不更改画布大小。

我的代码如下：

    <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 或任何自定义大小的图像而不更改画布大小。

是否有任何可能的方法可以将任何画布下载为具有自定义大小的图像，而无需调整画布大小？

【问题讨论】：

drawimage 的一个版本可以同时缩放和绘制您的图像。例如，这将获取您的 500x500 图像对象 (img) 并将其调整为 700x700，然后再将其绘制到画布上：drawImage(img,0,0,500,500,0,0,700,700)

标签： javascript jquery html canvas html5-canvas

【解决方案1】：

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

正如 cmets 中提到的 markE，ctx.drawImage( ) 具有调整绘制图像大小的选项ctx.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight);。
您也可以将画布元素作为其第一个 image 参数传递。

然后你可以写这样的东西：

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);

img, canvas{border: 1px solid}

&lt;canvas height="200" width="200" id="canvas"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案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();
}

【讨论】：

没有callback可以吗？
是否有任何方法可以将高度和宽度参数传递给画布并使用 toDataUrl() 下载？
@RayonDabre 哪个回调？ dvs.spy 没有本地方法，除非您想缩放/调整主画布的大小，但如果自定义尺寸大于本地尺寸，则您正在拉伸图像（通常结果不佳）。
@dvs.spy，感觉canvas重绘不会是同步操作。
绘图是同步的：jsfiddle.net/o5ja5rko（或 developer.mozilla.org/en-US/docs/Web/API/Canvas_API 用于 ref ）。如果是动画，您可能希望有一个回调，但事实并非如此。

【解决方案3】：

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

获得ImageData 对象后，在内存中创建一个宽度和高度与ImageData 对象相同的canvas 对象，并使用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

【讨论】：