nhn / tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
http://ui.toast.com/tui-image-editor
MIT License
6.84k stars 1.26k forks source link

Image byte size is different after loading inside tui editor by comparing with c# byte size #838

Open rajeshparbatgit opened 1 year ago

rajeshparbatgit commented 1 year ago

Case : Masking is mandatory in the tui tool before saving image in the media server . As we are keeping all the images in the cloud server s3 bucket

Action : To do mandatory masking i have compared byte size of image before masking and after masking. Result : If there is no masking done and we calculate image size by following way 👍

download: function download() { //debugger;

                var dataURL = _this.toDataURL("image/jpg").replace("image/jpg", "image/png");
                var imageName = _this.getImageName();
                var blob = void 0,
                    type = void 0,
                    w = void 0;

                if (_util2.default.isSupportFileApi() && window.saveAs) {
                    blob = _util2.default.base64ToBlob(dataURL);
                    //blob = dataURItoBlob(dataURL);

                    type = blob.type.split('/')[1];
                    if (imageName.split('.').pop() !== type) {
                        imageName += '.' + type;
                    }
                    if (typeof uploadToFtp !== 'undefined' && $.isFunction(uploadToFtp)) {
                        return uploadToFtp(dataURL, imageName, _this.ui.options.ftpUrl, blob.size, _this.ui.options.newByteLengthControl, _this.ui.options.oldByteLengthControl);
                        //return uploadToFtp(dataURL, imageName, _this.ui.options.ftpUrl, blob.size, blob.size, _this.ui.options.oldByteLengthControl);
                    } else {
                        saveAs(blob, imageName); // eslint-disable-line
                    }
                } else {
                    w = window.open();
                    w.document.body.innerHTML = '<img src=\'' + dataURL + '\'>';
                }
                event.preventDefault();
            }
        }, this._commonAction());
    },

getting this image size in the javascript by following method function uploadToFtp(dataURL, imageName, ftpUrl, blobSize, newByteLengthControl, oldByteLengthControl) {

   /// **Here blob size which is image size of the tui editor image loaded  is greater without masking** 

        }

The same issue found when i compared with c# in which image byte size different than loaded and exposed in the blob (mentioned code above) image from the tui editor image

lja1018 commented 1 year ago

@rajeshparbatgit Thank you for the information. I'll check.