原生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 ???????????} ?????????} ???}