vue img轉canvas頁面展示下載

<template>
    <div>
        <h2>
            TestCanvas
        </h2>

        <img
            v-show="false"
            ref="myImg"
            src="../assets/logo.png"
        >
        <canvas
            ref="myCanvas"
            width="200"
            height="100"
            style="border:1px solid #c3c3c3;"
        >
            您的瀏覽器不支持 HTML5 canvas 標籤。
        </canvas>
        <button
            @click="downloadCanvas">
            下載
        </button>
    </div>
</template>

<script>
export default {
    name: "TestCanvas" ,
    data () {
        return {

        }
    } ,
    methods: {
        alert : function () {
            alert("emem") ;
        } ,
        downloadCanvas : function () {
            // 內部函數1(可忽略細節)
            const saveFile = function(data, fileName){
                let save_link = document.createElement('a');
                save_link.href = data;
                save_link.download = fileName;
        
                let event = document.createEvent('MouseEvents');
                event.initEvent("click", true, false);
                save_link.dispatchEvent(event);
            };
            // 內部函數2(可忽略細節)
            const imgType = function (ty) {
                let type = ty.toLowerCase().replace(/jpg/i, 'jpeg');
                var r = type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/' + r;
            } ;

            const type = 'png';   //設置下載圖片的格式
            const cans = this.$refs.myCanvas ; //canvas實例子
            const img_png_src = cans.toDataURL("image/png");  //將canvas保存爲圖片
            const imgData = img_png_src.replace(imgType(type),'image/octet-stream');
            const filename = 'canvas' + '.' + type; //下載圖片的文件名
    
            // shoot
            saveFile(imgData,filename);

        }
    } ,
    mounted: function () {
        console.log("掛載成功") ;
        var c=this.$refs.myCanvas ;
        var ctx=c.getContext("2d");
        var img=this.$refs.myImg;
        // 貼圖
        ctx.drawImage(img,0,0);
        ctx.font="10px Arial";
        // 打水印
        ctx.fillText("Kingdee",160,90);
    }
}
</script>