以固定分辨率圖像base64

在我的web應用程序中，用戶可以使用他的移動設備上的相機拍照。照片然後顯示在畫布上。以固定分辨率圖像base64

<canvas id="photo" ></canvas>

現在我想將照片發送到後端服務器。做到這一點的最佳方式似乎是將圖像編碼爲base64字符串。

但是，我希望照片始終爲相同分辨率，例如100 x 100像素。否則base64字符串太大。

我正在使用second parameter of toDataURL來確定圖片的導出質量。（這裏2％）。

var base64 = document.getElementById("photo").toDataURL("image/jpeg", 0.02);

這似乎不是一個好辦法，因爲我不知道照片的初始分辨率。所以我想總是以相同的分辨率拍攝照片。如何實現這一目標？

來源

2014-01-30 Hazaart

我想知道如果這個問題可能會給你的答案，調整圖像大小的一部分？ http://stackoverflow.com/questions/961913/image-resize-before-upload – niaccurshi

您可以使用尺寸爲100x100的不可見背景畫布，並將照片畫布上的圖像複製到該畫布上。 drawImage函數允許您指定目標矩形的大小。當它是不一樣的源矩形的內容將會被縮放：

// Create a temporary, invisible 100x100 canvas 
var tmpCanvas = document.createElement('canvas'); 
tmpCanvas.width = 100; 
tmpCanvas.height = 100; 
var tmpContext = canvas.getContext('2d'); 

// copy the content of the photo-canvas to the temp canvas rescaled 
var photoCanvas = document.getElementById("photo"); 
tmpContext.drawImage(photoCanvas,        // source 
        0, 0, photoCanvas.width, photoCanvas.height, // source rect 
        0, 0, 100, 100        // destination rect 
        ); 

// get data-url of temporary canvas 
var base64 = tmpCanvas.toDataURL("image/jpeg");

但是請記住，當源帆布不是長方形，長寬比將不會被保留。當你不想要這個時，有不同的方法來處理這個問題，例如裁剪或添加邊框。其中大部分將通過在drawImage調用中選擇不同的源矩形或目標矩形來實現。

來源

2014-01-30 13:31:06 Philipp

只是挑剔，但源和目的rects並不是真的必要在這裏，只需使用：'tmpContext.drawImage（photoCanvas，0，0，100， 100）;' – K3N

以固定分辨率圖像base64

回答

相關問題