timtnleeProject/vuejs-clipper

rounded clip

dsultanr opened this issue · 5 comments

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

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

Excellent. Thanks!

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

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