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

Question

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

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

但是输出缩略图图像被扭曲了。缩略图图像的内存大小不应超过5KB。例如：堆栈溢出用户图标，Facebook聊天窗口用户图标。

Answer 1

您应该首先设置帆布数据。如果不是，则画布数据将等于您的整个图像大小，并且在作物后会扭曲。

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