datasync-blob 1.1.19 → 1.1.22

package/dist/components/DsBlob.js

@@ -17,7 +17,7 @@ class DsBlob extends _react.Component {
   }
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
-  reduceImage = e => {
+  reduceBinaryImage = e => {
     let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
 
     if (this.debugging) console.log("imageSource = ", imageSource);
@@ -91,11 +91,93 @@ class DsBlob extends _react.Component {
       });
     }
   };
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  reduceBinaryImage = e => {
+    let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
+
+    alert("reduceBinaryImage !");
+    if (this.debugging) console.log("imageSource = ", imageSource);
+    var canvas = document.createElement('canvas'),
+      context,
+      width = imageSource.width,
+      height = imageSource.height;
+
+    //Exact size props are set
+    if (this.props.width && this.props.height) {
+      //Check image size
+      if (width > this.props.width || height > this.props.height) {
+        alert("L'image est trop grande, le format requis est " + this.props.width + "x" + this.props.height);
+        return;
+      }
+
+      //Check image size
+      if (width < this.props.width || height < this.props.height) {
+        alert("L'image est trop petite, le format requis est " + this.props.width + "x" + this.props.height);
+        return;
+      }
+    }
+
+    //Max size props are set
+    if (this.props.maxWidth && this.props.maxHeight) {
+      if (width > height) {
+        //Check resize is enabled
+        if (!this.props.reduceImage) {
+          alert("L'image est trop large ! la largeur maximale est de " + this.props.maxWidth);
+          return;
+        }
+        if (width > this.props.maxWidth) {
+          height *= this.props.maxWidth / width;
+          width = this.props.maxWidth;
+        }
+      } else {
+        if (height > this.props.maxHeight) {
+          //Check resize is enabled
+          if (!this.props.reduceImage) {
+            alert("L'image est trop haute, la hauteur maximale est de " + this.props.maxHeight);
+            return;
+          }
+          width *= this.props.maxHeight / height;
+          height = this.props.maxHeight;
+        }
+      }
+    }
+
+    //Build 2d picture
+    canvas.width = width;
+    canvas.height = height;
+    context = canvas.getContext('2d');
+    context.drawImage(imageSource, 0, 0, width, height);
+
+    //Binary conversion using toBlob to maintain binary output
+    let jpegCompressionRatio = this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1 ? this.props.jpegQuality : 1;
+    canvas.toBlob(blob => {
+      if (blob) {
+        console.log("Binary blob created, size:", blob.size);
+        if (this.debugging) console.log("jpegCompressionRatio->", jpegCompressionRatio, " blob.size = ", blob.size);
+
+        // Convert blob to ArrayBuffer for binary data
+        const reader = new FileReader();
+        reader.onload = () => {
+          const binaryData = reader.result; // ArrayBuffer
+          console.log("Binary data ArrayBuffer:", binaryData);
+
+          // Pass binary data directly to uploadPicture
+          this.props.uploadPicture({
+            data: binaryData,
+            item_id: this.props.item_id
+          });
+        };
+        reader.readAsArrayBuffer(blob);
+      } else {
+        console.error("Failed to create blob from canvas");
+      }
+    }, 'image/jpeg', jpegCompressionRatio);
+  };
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
   storeBase64ImageToImg = e => {
     var image = document.createElement('img');
-    image.onload = this.reduceImage;
+    image.onload = this.reduceBinaryImage;
     console.log("storeImageToImg:e.currentTarget.result = ", e.currentTarget.result);
     alert("storeImageToImg !");
     image.src = e.currentTarget.result;
@@ -117,13 +199,12 @@ class DsBlob extends _react.Component {
     image.src = blobUrl;
 
     // Clean up blob URL after image loads to prevent memory leaks
-    /* 2Do Debug
-    image.onload = (loadEvent) => {
-        this.reduceImage(loadEvent);
-        URL.revokeObjectURL(blobUrl);
-        // Clear the stored image type
-        this.currentImageType = null;
-    };*/
+    image.onload = loadEvent => {
+      this.reduceBinaryImage(loadEvent);
+      URL.revokeObjectURL(blobUrl);
+      // Clear the stored image type
+      this.currentImageType = null;
+    };
   };
 
   //-----------------------------------------------------------------------------------------------------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datasync-blob",
-  "version": "1.1.19",
+  "version": "1.1.22",
   "description": "Datasync Blob component",
   "main": "./dist/components/DsBlob.js",
   "files": [