Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rounded clip #119

Closed
dsultanr opened this issue Nov 19, 2021 · 5 comments
Closed

rounded clip #119

dsultanr opened this issue Nov 19, 2021 · 5 comments
Assignees
Labels
enhancement New feature or request

Comments

@dsultanr
Copy link

is it possible to implement the "round" property to work for the resulting canvas also?

here are the nice examples from the simple one to complicated

@dsultanr dsultanr added the enhancement New feature or request label Nov 19, 2021
@dsultanr
Copy link
Author

dsultanr commented Dec 9, 2021

@timtnleeProject ?

@timtnleeProject
Copy link
Owner

Hi @dsultanr

Release v4.1.0

clipper-fixed: if prop round is true, result image will clip in rounded background #119.

Demo

https://timtnleeproject.github.io/vuejs-clipper/#/fixed
chose png and round to see the result.
image
image

@dsultanr
Copy link
Author

Excellent. Thanks!

@dsultanr
Copy link
Author

dsultanr commented Dec 29, 2021

chose png and round to see the result.

@timtnleeProject is it working with the png only? I had an unexpected result with this code:

            let canvas
            if (this.wPixel > 0)
            {
                canvas = this.$refs.clipper.clip({ wPixel: this.wPixel });//call component's clip method
            } else {
                canvas = this.$refs.clipper.clip();//call component's clip method
            }
canvas.toBlob(function(blob) {
                let fileInputElement = document.getElementById('clipper_result');
                // Here load or generate data
                let data = new Blob();
                let file = new File([blob], "image.jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
                let container = new DataTransfer();
                container.items.add(file);
                fileInputElement.files = container.files;
                // console.log(fileInputElement.files);
            }, 'image/jpeg', 0.8);

image
image

@timtnleeProject
Copy link
Owner

@dsultanr I think jpg will also work but result in the black background.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants