javascript - 从多个设备上传裁剪的图像，同时保持更大的图像尺寸

我的目标是允许用户上传个人资料图像，并在上传之前裁剪图像，以便很好地适合图像容器。这是一个非常普遍的问题。

我遇到的问题是，当用户使用移动设备时，裁剪和上传的图像最终大约为 350 像素宽，这导致在大屏幕上查看时会产生高度像素化的图像，最终会根据需要拉伸图像（超过 700 像素）。

流程如下：用户在本地选择新图片上传；然后将此图像植入浏览器以进行裁剪；生成的裁剪图像（base64）具有正确的纵横比，但像素大小（宽度和高度）与设备的屏幕宽度一致，根据设备的不同，可能非常小。

我正在使用 Croppie.js 进行裁剪，效果很好。但是，在小型设备（手机等）上裁剪时，浏览器中生成的 base64 图像的像素非常小。最终上传的是 base64 图像，因此这会导致上面提到的问题，即在更大的设备上进行拉伸和像素化。

任何我忽略的输入或其他技术将不胜感激。

标签： javascriptimagecanvas

当您要求结果时，使用 size = original 应该可以为您提供更高质量的图像，您可以在显示时缩放到您需要的大小。