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

时间:2019-02-27 18:21:30

标签: javascript image canvas

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

我遇到的问题是,当用户使用移动设备时,裁剪并上传的图像最终大约为350像素宽,这在大屏幕上观看时会导致高度像素化的图像,最终会拉伸图片(需要700像素以上)。

流程如下:用户在本地选择新图像进行上传;然后将此图像植入浏览器以进行裁剪;生成的裁剪图像(base64)的宽高比正确,但是以像素为单位的大小(宽度和高度)取决于设备的屏幕宽度,取决于设备的宽度可能很小。

我正在使用Croppie.js进行裁剪,效果很好。但是,当在小型设备(电话等)上裁剪时,位于浏览器中的结果base64图像的像素非常小。 base64映像最终会被上传,因此这会导致上面提到的在大型设备上出现拉伸和像素化的问题。

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

1 个答案:

答案 0 :(得分:0)

每个https://foliotek.github.io/Croppie/

当您要求结果时,使用size = original应该可以为您提供更高质量的图像,您可以将其缩放到显示时所需的尺寸。