基本方法

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 download=function()
{
    const canvas = document.querySelector('canvas');
    var dataURL = canvas.toDataURL("image/png");
    saveFile(dataURL,'test.jpg');
}

参考

<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
            } 
 
        }
    }