Question

在我的网络应用程序中，用户可以在移动设备上使用相机拍照。然后将照片显示在画布中。

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

现在我想将照片发送到后端服务器。最好的方法是将图像编码为base64字符串。

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

我目前正在使用second parameter of toDataURL来确定图片的导出质量。（这里2％）。

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

这似乎不是一个好方法，因为我不知道照片的初始分辨率。因此，我希望始终以相同的分辨率获取照片。怎么做到这一点？

Answer 1

您可以使用尺寸为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");

但请记住，当source-canvas不是矩形时，不会保留纵横比。当您不想要这个时，有不同的方法来处理这个问题，比如裁剪或添加边框。其中大部分都是通过在drawImage调用中选择不同的源矩形或目标矩形来实现的。

固定分辨率的图像到base64

1 个答案: