Queries regarding design.

[shubhwebkul]

I have few queries regarding vue image editor:-

• I want to disable the image upload section (Load), the user will only edit the existing image. Is it possible (provide default image)(https://prnt.sc/103ug67)?
• Image is not getting download with a click of the download button. It is just opening in a new tab.
• How to Remove Toast UI Image Editor logo in the header (https://prnt.sc/103ucn3)
• How to enable annotations (like long comments and save)
• How to change the default background color of the Download button (https://prnt.sc/103ucn3)
• https://prnt.sc/103vhex
• Images are not editable when I use $refs this.$refs.editor.invoke('loadImageFromURL', url, name);

[lja1018]

@shubhwebkul
Thanks for your questions and bug reports.

I want to disable the image upload section (Load), the user will only edit the existing image. Is it possible (provide default image)(https://prnt.sc/103ug67)?

• Try using the custom theme.

const theme = {
  ...
  'loadButton.backgroundColor': '#fff',
  ...
};

Image is not getting download with a click of the download button. It is just opening in a new tab.

• It seems to be a bug. Thanks for the report.

How to Remove Toast UI Image Editor logo in the header (https://prnt.sc/103ucn3)

• It seems that you need to do it with css. Try using tui-image-editor-header-logo class.

How to enable annotations (like long comments and save)

• I don't understand annotations means. Can I report it again?

How to change the default background color of the Download button (https://prnt.sc/103ucn3)

• Try using the custom theme.

const theme = {
  ...
  'downloadButton.backgroundColor': '#fdba3b',
  ...
};

https://prnt.sc/103vhex

• I don't seem to have this option yet. I'll add it next time.

Images are not editable when I use $refs this.$refs.editor.invoke('loadImageFromURL', url, name);

• Seems similar to issue All buttons of the Tui image editor are disabled and don't work when i use LoadImageUrl or LoadImageFile to load a specific image programmaticaly in Angular #477. Once we figure out the cause, I'll fix it.

Thank you again for bug reports and questions.

[shubhwebkul]

Thanks for your response. I really appreciate your support.

Annotation is something like this:-
http:https://flipbit.co.uk/jquery-image-annotation.html#

[shubhwebkul]

I have few more queries:-

• how to change default color.(https://prnt.sc/105th1g)
• how to add a custom menu here and listen to the event of that menu (https://prnt.sc/1066wvx)
• the custom circle is coming on the download and how to make it draggable (https://prnt.sc/106q2up)
• how to listen to the event of adding the text and get its value?
• How to draw Bubble with a number (combined dragged also) https://prnt.sc/108pppq
• How to add custom icon from code (https://prnt.sc/10a0mx3)

[shubhwebkul]

Do we have any update?

[lja1018]

@shubhwebkul
Thanks for your questions.

How to enable annotations (like long comments and save)

• We do not support the image annotation feature.

how to change default color.(https://prnt.sc/105th1g)

• The default selected color option will be worked on later.

how to add a custom menu here and listen to the event of that menu (https://prnt.sc/1066wvx)

• How to add custom menu buttons #132 issue seems to be helpful for this question.

the custom circle is coming on the download and how to make it draggable (https://prnt.sc/106q2up)

• Did you add a circle using the addShape API? When I tested it, a circle was also added to the downloaded image.

how to listen to the event of adding the text and get its value?

• Try using the addText event

How to draw Bubble with a number (combined dragged also) https://prnt.sc/108pppq

• For bubble with number, you must use the bubble icon and text together.

How to add custom icon from code (https://prnt.sc/10a0mx3)

• Registering a custom icon is an action added to provide our ui, and the API is not open.

[shubhwebkul]

@lja1018 Thank you for providing the solutions. Those were really helpful.

Currently, I am using invoke method to add circle shape, but I didn't understand your point when you mentioned you must use the bubble icon and text together

this.$refs.editor.invoke('addShape', 'circle', {
                        fill        : 'red',
                        stroke      : 'blue',
                        strokeWidth : 3,
                        rx          : 20,
                        ry          : 20,
                        left        : 100,
                        top         : 100,
                        isRegular   : false,
})

• Also, width is not working with addText
  this.$refs.editor.invoke('addText', "1212", { styles: { fill: '#000', fontSize: 50, stroke: 'blue', strokeWidth : 2, fontWeight: 'bold', width: 50, backgroundColor: '#000', isRegular: false, }, position: { x: 95, y: 90 } })