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

时间:2015-10-09 08:23:46

标签: javascript jquery html5 canvas html5-canvas

我正在尝试将画布下载为图像。我的画布高度是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或任何自定义尺寸的图像而不更改画布大小。

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

3 个答案:

答案 0 :(得分:0)

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

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

然后你可以这样写:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:-1)

通常,您必须使用自定义尺寸创建另一个画布,重新应用为主要画布运行的所有绘图说明,然后调用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();
}

答案 2 :(得分:-1)

您可以使用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