iT邦幫忙

0

怎麼把canvas部分存成圓形圖片?

如圖

這張是網頁上的畫面
我用css把canvas變成圓的
雖然在網頁上不會顯示

下面這張是我存起來的圖片

我把canvas變成圖片存起來後
會存成完整的正方形canvas
而不是我想要的圓形圖片

請問我該怎麼把canvas存成圓形圖片?

以下是程式碼

        const canvas = new fabric.Canvas('canvas', {
            width: 650,
            height: 650,
        })
        // 下載圖片到後端
        function dlimg() {
            // 建立 file

            const dataURL = canvas.toDataURL('image/png')
            const blobBin = atob(dataURL.split(',')[1])
            const array = []
            for (let i = 0; i < blobBin.length; i++) {
                array.push(blobBin.charCodeAt(i))
            }
            const file = new Blob([new Uint8Array(array)], {type: 'image/png'})
            console.log(file)
            // 將file 加至 formData
            let formData = new FormData()
            formData.append('file', file, 'test.png');
            console.log(formData)
            formData.append('_token', '{{ csrf_token() }}');

            //real ajax
            jQuery.ajax({
                url: '{{route('test3222.upload')}}',
                type: "POST",
                dataType: "html",
                contentType:false,
                processData:false,
                data: formData,
                success: function (response) {
                    console.log('success!');
                }
            });
        }

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

3
通靈亡
iT邦高手 1 級 ‧ 2020-10-19 12:18:03
最佳解答

因為你的Canvas圓形和圓形邊框是由CSS產生的,圓形邊框並不屬於Canvas
你可以產生一個Canvas,並在Canvas繪製等寬與等高的圓,接著在裡面繪製圖片
下載時取得這個Canvas就會包含圓型及所有文字和圖片

範例:
https://jsfiddle.net/gdt6aey2/

要注意的是
這個範例程式碼的下載功能,由於CORS的因素,在JS Fiddle上是無法作用
繪製在圓型的圖片檔來源,請使用自己伺服器環境上的圖片
若使用跨域的圖片,請加上 image.crossOrigin = 'Anonymous'

看更多先前的回應...收起先前的回應...

不好意思 忘記補充 我是用fabric.js的canvas 一樣可以用嗎

通靈亡 iT邦高手 1 級 ‧ 2020-10-19 16:36:41 檢舉

juice416021
可以,直接再fabric.js產生的canvas裡面畫一個圓就可以了

https://jsfiddle.net/81wLt5qc/

通靈亡
成功套用在我的網頁裡了
感謝你!

通靈亡
話說我在把canvas存成圖片的時候
我有辦法把他存成 長寬都為2000px的圖嗎?

通靈亡 iT邦高手 1 級 ‧ 2020-10-26 20:46:49 檢舉

我要發表回答

立即登入回答