h5图片下载

通过链接保存图片，是很常见的需求，我这里总结了几种比较好用的方式，以下方式在pc中基本适用。

这里的下载最终都使用了a的download的属性，区别在于前置对图片的处理。（直接通过图片链接使用并不适用大部分机型）

1.通过图片加载，canvas转base64，a超链的download属性下载图片（推荐方法，适用于大部分机型）

tips:  .bin文件需要加文件后缀命名（这里为photo.png）

            downloadIamge(imgsrc, name) {//下载图片地址和图片名
			  let image = new Image();
			  // 解决跨域 Canvas 污染问题
			  image.setAttribute("crossOrigin", "anonymous");
			  image.onload = function() {
			    let canvas = document.createElement("canvas");
			    canvas.width = image.width;
			    canvas.height = image.height;
			    let context = canvas.getContext("2d");
			    context.drawImage(image, 0, 0, image.width, image.height);
			    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
			    let a = document.createElement("a"); // 生成一个a元素
			    let event = new MouseEvent("click"); // 创建一个单击事件
			    a.download = name || "photo.png"; // 设置图片名称
			    a.href = url; // 将生成的URL设置为a.href属性
			    a.dispatchEvent(event); // 触发a的单击事件
			  };
			  image.src = imgsrc;
			},

2.于上相同，不同的是用了 window.URL.createObjectURL 处理图片。（测试后，部分机型并没有window.URL，或者无法通过这个进行转化）

              downloadImgByBlob(url) {
				var img = new Image()
				img.onload = function() {
					var canvas = document.createElement('canvas')
					canvas.width = img.width
					canvas.height = img.height
					var ctx = canvas.getContext('2d')
					// 将img中的内容画到画布上
					ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
					// 将画布内容转换为Blob
					canvas.toBlob((blob) => {
						// blob转为同源url
						var blobUrl = window.URL.createObjectURL(blob)
						// 创建a链接 
						var a = document.createElement('a')
						a.href = blobUrl
						a.download = 'younei.png' //文件名称，不填默认为当前请求名称
						// 触发a链接点击事件，浏览器开始下载文件
						a.click()
					})
				}
				img.src = url
				// 必须设置，否则canvas中的内容无法转换为blob
				img.setAttribute('crossOrigin', 'Anonymous')
			},

3.这个使用的也是URL.createObjectURL，区别在于触发a事件的时候使用了另外的方式，因此存在同样的问题。(也许能跟第一种结合一下)

                savePic(Url){
					// Url = this.dialogImgUrl //图片路径，也可以传值进来
					var triggerEvent = "touchstart"; //指定下载方式
				    var blob=new Blob([''], {type:'application/octet-stream'}); //二进制大型对象blob
				    var url = URL.createObjectURL(blob); //创建一个字符串路径空位
				    var a = document.createElement('a'); //创建一个 a 标签
				    a.href = Url;  //把路径赋到a标签的href上
				    //正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
				    a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0]; 
				   
				    //代替方法。创建鼠标事件并初始化（后面这些参数我也不清楚，参考文档吧 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent）
					var e = new MouseEvent('click', ( true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));  
					//派遣后，它将不再执行任何操作。执行保存到本地
				    a.dispatchEvent(e); 
				    //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
				    URL.revokeObjectURL(url);  
				},