search

advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
1.01k stars 136 forks source link

Canvas instead of image #277

Closed a0s closed 5 months ago

a0s commented 5 months ago

Hello! Thank you for great project! I have a canvas that could changes in any time (in real time). I want to use cropper with my canvas (instead of fixed image). What the best way to do it? Should i hack src/components/helpers/Preview.vue ?

Norserium commented 5 months ago

@a0s, I don't see currently any straight ways to implement that, but I want to understand what do you want to develop. Something like this?

a0s commented 5 months ago

@Norserium I am developing some sort of online image editor. It works like a stack of modifications for basic image. It operates on OffscreenCanvas'es. Every change of modifier leads to real-time recalculating of final image (i draw final OffscreenCanvas to real html Canvas). So, now i need to integrate briliant vue-advanced-cropper into my project (i need visual handler of crop operation mostly, not cropping action itself), I already tried to render canvas into blob than save it as dataUrl jpg/png/webp whatever, but it was deadly slow for some reason. Something inside vue-advanced-cropper doing very slow initialization during picture change, also some slow animations... But i dont need any animations, just as fast as possible updating. I tried to switch animations off with no big success.

So my idea is 1) rewrite Cropper to good typed code with no warnings/errors from IDE. I started from 500+ errors, now its 100 left only. Ofc , most of errors were pretty easy like a replacing this.smth to smth.value or props.smth. 2) then, i am going to throw out everything related img and replace it with OffscreenCanvas. With well-typed code and hints from the IDE, this shouldn't be a big deal. Unfortunately the source code is not as well typed as I would like and there are many dubious places..

Norserium commented 5 months ago

@a0s, in other words, do you want to make something like this editor?

a0s commented 5 months ago

I saw it. Any editor is sort of any another editor. I don't see how your editor's source code can help me, due its still using img as the source but not the canvas.

hmm but maybe https://advanced-cropper.github.io/react-advanced-cropper/docs/tutorials/image-editor/#custom-background-component could be helpfull, will check it, thank you!

Norserium commented 5 months ago

@a0s, it's the react cropper, but it will be ported to Vue sometimes as a new major version.

I saw it. Any editor is sort of any another editor. I don't see how your editor's source code can help me, due its still using img as the source but not the canvas.

It uses canvas under the hood as the source. The img element presents also, but it not used by the cropper directly, I just use it to draw the image on the canvas.

a0s commented 5 months ago

@Norserium Sounds like a solution for my question! I'll definitely test it when it becomes available.