JS图片另存为

第一种

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script language="JavaScript">
  <!--
    function downLoadImage(imagePathURL){
        
        //如果中间IFRAME不存在，则添加
        if(!document.getElementById("_SAVEASIMAGE_TEMP_FRAME"))
            jQuery('<iframe style="display:none;" id="_SAVEASIMAGE_TEMP_FRAME" name="_SAVEASIMAGE_TEMP_FRAME" οnlοad="_doSaveAsImage();"
width="0" height="0" src="about:blank"></iframe>').appendTo("body");        
        
        if(document.all._SAVEASIMAGE_TEMP_FRAME.src!=imagePathURL){
            //图片地址发生变化，加载图片
            document.all._SAVEASIMAGE_TEMP_FRAME.src = imagePathURL;
        }else{
            //图片地址没有变化，直接另存为
            _doSaveAsImage();
        }
    }
    function _doSaveAsImage(){        
        if(document.all._SAVEASIMAGE_TEMP_FRAME.src!="about:blank")
            document.frames("_SAVEASIMAGE_TEMP_FRAME").document.execCommand("SaveAs");        
    }
 
  //-->
  </script>
 </head>
 
 <body>
  <input type="button" value="download image" οnclick="downLoadImage('http://www.blogjava.net/images/blogjava_net/weiwei/46570/r_beyond1991.jpg');">  
 </body>
</html>

保存到电脑上（pc）

downloadCanvasIamge(selector, name) {
	var image = new Image()
	// 解决跨域 Canvas 污染问题
	image.setAttribute('crossOrigin', 'anonymous')
	image.onload = function () {
		var canvas = document.createElement('canvas')
		canvas.width = image.width
		canvas.height = image.height

		var context = canvas.getContext('2d')
		context.drawImage(image, 0, 0, image.width, image.height)
		var url = canvas.toDataURL('image/png')

		// 生成一个a元素
		var a = document.createElement('a')
		// 创建一个单击事件
		var event = new MouseEvent('click')

		// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
		a.download = name || '下载图片名称'
		// 将生成的URL设置为a.href属性
		a.href = url
		// 触发a的单击事件
		a.dispatchEvent(event)
	}

	image.src = document.querySelector(selector).src
}

参数

selector：要保存的元素的名字，img的那个标签，不用写到src
name：要下载的图片的名字（可填可不填），不填默认为 下载图片名称 上面代码有判断~

保存到电脑、手机端（相册）中

saveImg (Url) {
	var blob=new Blob([''], {type:'application/octet-stream'});
	var url = URL.createObjectURL(blob);
	var a = document.createElement('a');
	a.href = Url;
	a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
	var e = document.createEvent('MouseEvents');
	e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	a.dispatchEvent(e);
	URL.revokeObjectURL(url);
}

参数

Url：要保存的路径（图片的名字），也就是 img 标签属性里的 src的值
譬如：在vue中的data里

data () {
    return {
        saveImgpath: require('../assets/moren.png')
    }
}
//然后这个 saveImgpath 就是上面方法saveImg（Url）的 Url的参~

注：这是vue的项目中用到的，其他也适用，稍做修改就好了~~~

JS图片另存为

第一 种

保存到电脑上（pc）

参数

保存到电脑、手机端（相册）中

参数

第一种