如何从原始图像创建缩略图而不失真？

Question

我正在使用 cropper.js 库裁剪图片。根据裁剪的图像，通过传递高度和宽度创建缩略图，如下所示

cropper.getCroppedCanvas({ width: 100, height: 100 })

但输出缩略图图像失真。缩略图图像的内存大小不应超过5kb。例如：stack overflow user icon，facebook chat window user icon。

Answer 1

您应首先设置画布数据。如果没有，画布数据将等于整个图像大小，并且在裁剪后会变形。

cropper.setCanvasData({ left:0,top:0, width: 100, height: 100 })
cropper.getCroppedCanvas({ width: 100, height: 100 })