调整映像大小后.js减小由结构序列化的 JSON 的大小

Reduce size of JSON serialized by fabric.js after image resize

本文关键字：序列化 结构 JSON js 映像 调整      更新时间：2023-09-26

使用文件输入和文件读取器将图像加载到结构画布。 我们使用 scaleToWidth 和 scaleToHeight 来让大照片适合画布。

当我使用选择一个大的 3.2MB jpeg 时，图像很好地调整为 1MB，这就是我们想要的。 然后，我们准备数据存储在本地索引数据库上;

    canvas.toJSON(); // 4.2MB
    canvas.toDataURL(); // 1MB

似乎 toJSON 方法存储了原始的 jpeg。 我们可以在序列化之前减少 jpeg 吗？

我更愿意序列化为 JSON，以便我们将来可以使用其他出色的 Fabric 功能。

我们用 ;

  1. 将照片加载到织物.js画布
  2. 然后导出它（将图像缩小到画布尺寸）和
  3. 将减少的图像数据重新加载回画布上，以及
  4. 删除原始全尺寸照片。

现在，结构.js画布数据被很好地减少，可以存储在本地索引数据库中;

    // camera image // 3.2 MB
    canvas.toJSON(); // 1 MB 
    canvas.toDataURL(); // 1 MB

JavaScript

        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            var opts = {};
            img.onload = function () {
                var imgInstance = new fabric.Image(img, opts);
                if (imgInstance.getWidth() > canvas.getWidth()) {
                    imgInstance.scaleToWidth(canvas.getWidth());
                }
                if (imgInstance.getHeight() > canvas.getHeight()) {
                    imgInstance.scaleToHeight(canvas.getHeight());
                }
                canvas.add(imgInstance);
                canvas.renderAll();
                img = null;
                /* now that the image is loaded reduce it's size 
                so the original large image is not stored */
                /* assumes photo is object 0, need to code a function to       
                 find the index otherwise */
                var photoObjectIx = 0; 
                var originalPhotoObject = canvas.getObjects()[photoObjectIx];
                var nimg = new Image();
                nimg.onload = function () {
                    var imgInstance = new fabric.Image(nimg, { selectable: false });
                    canvas.remove(originalPhotoObject);
                    canvas.add(imgInstance);
                    canvas.renderAll();
                    nimg = null;
                };
                nimg.src = originalPhotoObject.toDataURL();
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);

我个人压缩大 json 数据，然后在服务器上解压缩它......

在JS中放气 - 很好的脚本来gzdeflate（压缩）JSON。

然后。。。在 PHP 中：

<?php
   $json = gzinflate($HTTP_RAW_POST_DATA);
?>
相关文章：