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

Question

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

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

但是输出的缩略图图像失真。缩略图的内存大小不应超过5kb。例如:堆栈溢出用户图标、Facebook 聊天窗口用户图标。

Answer 1

您应该先设置 Canvas 数据。如果不是， Canvas 数据将等于整个图像的大小，并且裁剪后会扭曲。

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