search

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.85k stars 1.27k forks source link

Resize browser window #55

Open rozumny opened 5 years ago

rozumny commented 5 years ago

Hi guys, is it possible to auto resize editor (canvas, controls,...) when user resize browser window?

jinwoo-kim-nhn commented 5 years ago

@rozumny Sorry for the late reply.

You can resolve the canvas size with the imageEditor.resizeCanvasDimension api. However, it is currently difficult to change controls dynamically with the includeUI option. This issue will be considered for improvement.

bronze1man commented 1 month ago

I found a workaround of this problem (dom is the htmlDivElement of tui image editor, instance is the ImageEditor object) (you need change 20 or 280 with full width image and full height and guess and try):

        const ro = new ResizeObserver(()=>{
            const cssMaxWidth = dom.clientWidth-20
            const cssMaxHeight = dom.clientHeight-280
            instance.resizeCanvasDimension({width: cssMaxWidth, height: cssMaxHeight})
        })
        ro.observe(dom)