原生js 保存圖片到本地

<template>
    <div>
        <!--創建一個cavas  用來存放圖片-->
        <canvas  id="cavasimg" width="607" height="367"  ></canvas>

        <!--        聲明一個按鈕  用來觸發下載圖片到本地-->
        <input type="button" id="btnsavaImg" value="保存圖片到本地" @click="Download()"/>
    </div>

</template>
<script> 
    export default {
        data () {
            return {

            }
        },
        methods:{
            Download(){
                //cavas 保存圖片到本地  js 實現
                //------------------------------------------------------------------------
                //1.確定圖片的類型  獲取到的圖片格式 data:image/Png;base64,......
                var type ='jpg';//你想要什么圖片格式 就選什么吧
                var d=document.getElementById("cavasimg");
                var imgdata=d.toDataURL(type);
                //2.0 將mime-type改為image/octet-stream,強制讓瀏覽器下載
                var fixtype=function(type){
                    type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
                    var r=type.match(/png|jpeg|bmp|gif/)[0];
                    return 'image/'+r;
                };
                imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
                //3.0 將圖片保存到本地
                var savaFile=function(data,filename)
                {
                    var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                    save_link.href=data;
                    save_link.download=filename;
                    var event=document.createEvent('MouseEvents');
                    event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
                    save_link.dispatchEvent(event);
                };
                var filename=''+new Date().getSeconds()+'.'+type;
                //我想用當前秒是可以解決重名的問題了 不行你就換成毫秒
                savaFile(imgdata,filename);
            }
        },
        mounted () {
            $loading.hide()

            //canvas 繪制圖片    支持手機端
//            var canvas = document.getElementById('cavasimg');
//            var ctx = canvas.getContext('2d');

//            ctx.fillRect(0, 0, canvas.width, canvas.height);
//            ctx.fillStyle = "red";
//            ctx.font = 'italic bold 30px Helvetica ';
//            ctx.fillText('楷體', 50, 50); 

            // canvas 插入圖片   手機端點擊沒反應
            //獲取canvas元素
            var cvs = document.getElementById("cavasimg");
            //創建image對象
            var imgObj = new Image();
            imgObj.src = "http://10.20.11.202:7099/file/readImage?basePath=/sys/201803/8c7d8835de18452695fad2f328c0680efile.jpg";
            imgObj.setAttribute("crossOrigin",'Anonymous')
            //待圖片加載完后，將其顯示在canvas上
            imgObj.onload = function(){
                var ctx = cvs.getContext('2d');
                ctx.drawImage(this, 0, 0);//this即是imgObj,保持圖片的原始大小：470*480
                //ctx.drawImage(this, 0, 0,1024,768);//改變圖片的大小到1024*768
            } 
 
        }
    }