Tui.image-editor: Resize not working on the loaded image

[Ravi-kavya01]

Hi There,

I just want to know if there are any option to resize as we can resize as we are doing with the loaded object .

Thanks

[junghwan-park]

@Ravi-kavya01

we are doing with the loaded object

You expect resize UI box for backgroundImage? If that it is, unfortunately, there is any option or API for that.
TOAST UI Image-Editor built for draw some objects(shape, line, free drawing, text) on the background image or manipulate background image's colors with filter.
Background image is the canvas of what you editing. There's only way to change saving image size is cropping image.

Or, just resize canvas dimension with imageEditor.resizeCanvasDimension().

[Ravi-kavya01]

I tried this by adding the below code and the canvas has resized after calling the below function but when I download the image I got the image dimension without resize.

For example:

The image size is 500 x 500

I resize it to 20 x 20

When I download the image. The image dimension is 500 x 500. While the size should be 20 x 20

[junghwan-park]

@Ravi-kavya01
Is example code missing?
By the way, ImageEditor not change the original image dimensional size(ex. pixel width or height).
imageEditor.resizeCanvasDimension() API only affects presentational DOM's dimension. Not a original image source.

[Ravi-kavya01]

Okay, Is there any option to change the image dimension?

[rChinnnn]

@Ravi-kavya01
You could add resize image function into load function, here is my code, it's worked.
First, used canvas to resize input file, output base64 file (toDataUrl)
Second, transfer base64 file to blob file, and create newFile with blob file
Finally, call resizeImage(), loadImageFromFile(newFile)
You can set MAX_WIDTH, MAX_HEIGHT to 20, 20

...
load: function load(file) {
    // Darren Add Image Resize
    function dataURItoBlob(dataURI) {
      // convert base64/URLEncoded data component to raw binary data held in a string
      var byteString;
      if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
      else
        byteString = unescape(dataURI.split(',')[1]);

      // separate out the mime component
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

      // write the bytes of the string to a typed array
      var ia = new Uint8Array(byteString.length);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], {
        type: mimeString
      });
    }

    function resizeImage(file, onProcessedCallback) {
      var dataurl = '';
      var newFile = '';
      var img = document.createElement("img");
      var reader = new FileReader();

      reader.onload = function (e) {

        img.onload = function () {
          var canvas = document.createElement("canvas");
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);

          var MAX_WIDTH = 1600;
          var MAX_HEIGHT = 1200;
          var width = img.width;
          var height = img.height;

          if (width > height) {
            if (width > MAX_WIDTH) {
              height *= MAX_WIDTH / width;
              width = MAX_WIDTH;
            }
          } else {
            if (height > MAX_HEIGHT) {
              width *= MAX_HEIGHT / height;
              height = MAX_HEIGHT;
            }
          }
          canvas.width = width;
          canvas.height = height;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, width, height);

          dataurl = canvas.toDataURL("image/jpeg");
          newFile = new File([dataURItoBlob(dataurl)], `${file.name}`, {
            type: `${file.type}`,
            lastModified: Date.now()
          });
          onProcessedCallback(newFile);
        } // img.onload
        img.src = e.target.result;
      } // reader.onload

      // Load files into file reader
      reader.readAsDataURL(file);
      return newFile
    }
    resizeImage(file, function (newFile) {
      console.log(newFile);
      if (!_util2.default.isSupportFileApi()) {
        alert('This browser does not support file-api');
      }
      _this.ui.initializeImgUrl = URL.createObjectURL(newFile);
      _this.loadImageFromFile(newFile).then(function (sizeValue) {
        exitCropOnAction();
        _this.clearUndoStack();
        _this.ui.activeMenuEvent();
        _this.ui.resizeEditor({
          imageSize: sizeValue
        });
      })['catch'](function (message) {
        return Promise.reject(message);
      });
    })

    /** Source Code
      if (!_util2.default.isSupportFileApi()) {
        alert('This browser does not support file-api');
      }
      _this.ui.initializeImgUrl = URL.createObjectURL(file);
      _this.loadImageFromFile(file).then(function (sizeValue) {
          console.log(file)
          exitCropOnAction();
          _this.clearUndoStack();
          _this.ui.activeMenuEvent();
          _this.ui.resizeEditor({ imageSize: sizeValue });
      })['catch'](function (message) {
          return Promise.reject(message);
      });
    */

  },
...

[danishyasin33]

@rChinnnn Thank you for offering this solution, I made it work with the download button as well.

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!