將畫布調整爲較大的圖像並將其發送到服務器

Question

嗨我的網頁上有一個畫布。問題在於畫布像550x380像素，我需要導出像A1格式（9933x7016像素）的圖像，然後將其發送到服務器。這可能嗎？

Answer 1

您可以通過設置其寬度和高度屬性來調整畫布的大小。

// ? is a Number < 32767 
canvas.width = ?; 
canvas.height = ?; 

但是改變畫布的分辨率可能會清除它。爲確保您保留需要創建新畫布的圖像。

var newCan = document.createElement("canvas"); 

然後設置您需要的大小。

newCan.width = ? 
newCan.height = ? 

然後將舊的畫布複製到它上面。

var ctx1 = newCan.getContext("2d"); 
ctx1.drawImage(canvas,0,0,newCan.width,newCan.height); 

改變從550x380像素到9933x7016畫布會才真正是值得做的，如果你重新呈現所有內容，對於您將需要擴展。

// canvas is the old canvas (small) 
var scaleX = newCan.width/canvas.width; 
var scaleX = newCan.height/canvas.height; 
// set scale on new canvas 
ctx1.setTransform(scaleX, 0, 0, scaleY, 0, 0); 

然後，您可以在不更改渲染值的情況下以較高分辨率重新渲染內容。

也沒有多少機器將無法處理大的畫布，拋出「內存不足錯誤」或只是崩潰。如果機器具有內存，並且瀏覽器選項卡仍在運行，則在顯示畫布時，許多機器上的更新也會非常緩慢。 9933x7016需要接近280Mbytes的GPU或CPU RAM才能存儲。即使機器有RAM，也可能無法使用。因此，請確保您擁有畫布內容所需的任何生成數據的備份，以便客戶端至少可以再試一次。