loadimagefromfile and loadImageFromURL is not working

[thisisraghu1993]

I have a imageurl and i need to initialize before the imageeditor open i tried both loadImageFromURL and loadImageFromFile both are not working here is the code please look at it.

Editor.vue
<tui-image-editor :include-ui="useDefaultUI" :options="options" ref="tuiImageEditor"></tui-image-editor>
data() {
      return {
        useDefaultUI: true,
         options: {
            imageSize: {oldWidth: 300, oldHeight: 300, newWidth: 400, newHeight: 400},
            selectionStyle: {
              cornerSize: 20,
              rotatingPointOffset: 70
            },
            cssMaxWidth: 600,
            cssMaxHeight: 400,
            includeUI: {
              theme: blackTheme, // or whiteTheme
              uiSize: {
                width: '1000px',
                height: '100px'
              },
              imageSize: {oldWidth: 200, oldHeight: 200, newWidth: 200, newHeight: 200}
            }
          }
      };
    },
    methods: {
      addDefaultImage() {
        let url = "someImageurl";
        this.$refs.tuiImageEditor.invoke('loadImageFromURL', url, 'My 
         sample image').then((res) => { 
                          console.log(res);
                      });
      }
}

[elinardo10]

me too with error. and anybody help this..

[Akshay Mhatre]

same, says invoke is not defined on this => this.$refs.tuiImageEditor.invoke('loadImageFromURL', this.testimage , 'Image name 2020');

[tmgreensolutions]

After struggeling with the same probleme here are my solution which worked for me.

You have to place your code into the mounted() method of your vue component if you want to load the image on initialisation.

After the image has been loaded the editor must be resized:

mounted() {
    this.$refs.tuiImageEditor.invoke('loadImageFromURL', this.imageUrl, 'My sample image').then(result => {
        this.$refs.tuiImageEditor.invoke('ui.resizeEditor', {imageSize: result});
    });
}

There is also a method in the library which does this for you:

mounted() {
   let actions = this.$refs.tuiImageEditor.invoke('getActions');
   if(this.imageUrl && actions) {
       actions.main.initLoadImage(this.imageUrl, 'My sample image');
       this.$refs.tuiImageEditor.invoke('ui.activeMenuEvent');
   }
}

The editing menu have to be activated as you can see above if you use useDefaultUI: true.

[Nick Lewis]

same, says invoke is not defined on this => this.$refs.tuiImageEditor.invoke('loadImageFromURL', this.testimage , 'Image name 2020');

We have been having the same problem ourselves which only seems to have happened since we upgraded bootstrap-vue from 2.0.0 to 2.1.0 on our site and the functionality sits within a modal. Just wondered if any of you have a similar setup?

[Akshay Mhatre]

A workaround is that, I added a blank image from here (in loadImage inside path you add your base64 image I added an image with a matching background color as the editor's background) => ` options: {

                    selectionStyle:{
                            cornerSize:19,
                            cornerColor: "white"
                    },

                    includeUI: {
                        loadImage:{
                          
                            path:'your base64 image goes here',
                            name:'Blank'
                        },
                    }

}`

and then used this (as mentioned earlier) => this.$refs.tuiImageEditor.invoke('loadImageFromURL', this.testimage , 'Image name 2020');

and now it works...!

[Piyush Tiwari]

I get the Error - Uncaught (in promise) The executing command state is locked.
https://stackoverflow.com/questions/52367045/uncaught-in-promise-the-executing-command-state-is-locked
I referred stack overflow it says, maybe the image is not loaded yet. How to resolve this error?