是否可以將畫布下載爲具有自定義大小的圖像？

我想下載畫布作爲圖像。我的畫布高度是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的高度和寬度下載圖像，但我需要改變不與700像素的圖像或任何自定義尺寸的畫布大小。

是否有任何可能的方式下載任何畫布作爲具有自定義大小的圖像，無需調整畫布大小？

來源

2015-10-09 dvs.spy

有drawimage'將同時擴展並繪製圖像的'版本。例如，這會將您的500x500 imageObject（'img'）並將其調整到700x700，然後將其繪製到畫布上：'drawImage（img，0,0,500,500,0,0,700,700）' – markE

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

來源

2015-10-09 08:31:18 MarcoL

是否可能沒有'callback'？ – Rayon

是否有任何方法將高度和寬度參數傳遞給畫布並使用toDataUrl（）進行下載？ –

@RayonDabre哪個回調？ dvs.間諜有沒有本地的方法，除非你想縮放/調整主畫布，但如果自定義的大小比本地的大，你正在拉伸圖像（經常有不好的結果）。 – MarcoL

-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

來源

2015-10-12 13:47:14 Kesavan

有任何的沒有尺寸參數內置導出方法的畫布元素（toDataURL()和toBlob()）。
但是，您可以非常容易地編寫自己的實現：

正如坊間的評論中提到，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}

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

來源

2015-10-13 03:30:13 Kaiido

是否可以將畫布下載爲具有自定義大小的圖像？

回答

相關問題