vue-cropper 为什么原尺寸截图后，size与原图不一致？怎么才能控制size前后一致，或者相差不要太大

Mar 03 '20 02:03 shiki-gm

图片 size 和图片的宽高有关系

Mar 03 '20 02:03 xyxiao001

图片 size 和图片的宽高有关系

Mar 03 '20 02:03 xyxiao001

关键宽高与原图一致的情况下，Blob下的size也会差很多，当前full属性是false。是我落下哪个参数了么？

Mar 03 '20 02:03 shiki-gm

full 是按照原图比例输出

Mar 03 '20 02:03 xyxiao001

我也遇到类似问题。(vue-cropper =v0.5.0)

full: true。（输出尺寸没有变化）
没有进行剪裁。

如果质量用默认值1，原图276kb的jpeg会变成994kb。如果质量用默认值0.95，原图276kb的jpeg会变成386kb。

所以我也有点疑惑了。照例说，jpeg是有损压缩。保存一下质量损失一点。为什么会在有损失的情况下，文件反而变大了。

Mar 15 '20 09:03 stanleyxu2005

这个主要是 canvas 输出的参数，😷会有这么大差别嘛

Mar 16 '20 03:03 xyxiao001

可以借助 scale 这个值，this.$refs.cropper.scale。对输出的尺寸数据进行除以比例系数的方式处理

    // 表单提交所需要的比例信息
      const singleCoverScale = {}
      singleCoverScale.x = Math.round((cropX1 - imgX1) / scale)
      singleCoverScale.y = Math.round((cropY1 - imgY1) / scale)
      singleCoverScale.width = Math.round((cropX2 - cropX1) / scale)
      singleCoverScale.height = Math.round((cropY2 - cropY1) / scale)

Apr 03 '20 09:04 AllenChinese

我也遇到了这个问题，原图的size: 120903，裁剪后的size: 353700，来这里找答案，你们怎么解决的？

Jun 09 '20 09:06 PhoenixMenia

我也遇到了这个问题，原图的size: 120903，裁剪后的size: 353700，来这里找答案，你们怎么解决的？

如果问题解决不了，就在剪裁之后做大小比较。对于文件变大的情况，继续用原图保存吧。

Jun 09 '20 14:06 stanleyxu2005

我也遇到这种问题。明明原图才300+kb，尺寸也比裁剪框要大得多，结果裁剪出来的图居然1.6+M，这不得吓死人？

Jun 23 '20 08:06 gy18505

+1，size比原图大很多。

Jun 28 '20 02:06 biluochun

https://github.com/fengyuanchen/cropperjs#known-issues

Known image size increase: When exporting the cropped image on browser-side with the HTMLCanvasElement.toDataURL method, the size of the exported image may be greater than the original image's. This is because the type of the exported image is not the same as the original image's. So just pass the type the original image's as the first parameter to toDataURL to fix this. For example, if the original type is JPEG, then use cropper.getCroppedCanvas().toDataURL('image/jpeg') to export image.

Jun 28 '20 02:06 biluochun

可以考虑再次压缩

Jun 28 '20 07:06 xyxiao001

png 输出会比 jpg 要大

Jun 28 '20 07:06 xyxiao001

试试这个， high: false, // 是否按照设备的dpr输出等比例图片 (默认:true)

Jul 23 '20 16:07 xiuluoshanshan

试试这个， high: false, // 是否按照设备的dpr输出等比例图片 (默认:true)

没用。。。还是大得多

Aug 07 '20 13:08 bq49

控制台看一下 window.devicePixelRatio 的输出 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio

可能和屏幕分辨率有关，devicePixelRatio=1的普通屏幕和devicePixelRatio=2的HiDPI或Retina显示器输出的不同

Aug 25 '20 12:08 fengjiahao

vue-cropper vue-cropper copied to clipboard

为什么原尺寸截图后，size与原图不一致？怎么才能控制size前后一致，或者相差不要太大

vue-cropper
vue-cropper copied to clipboard