js 实现点击图片下载图片文件
js 实现点击图片下载图片文件
downloadImage:function(val){ // val 为传入的图片地址 let _type_index = val.lastIndexOf('.'); let _type = val.substr(_type_index + 1); //原始图片类型 let image = new Image(); image.setAttribute('crossOrigin','anonymous'); //消除跨域 image.src = val; image.onload = function(){ //借助canvas实现 消除 图片地址会先直接窗口打开图片地址 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/'+_type); let blob = _this.dataUrlToBold(url); let obj_url = URL.createObjectURL(blob); // 消除Chrome下文件太大 导致下载失败(网络失败)的问题 let a = document.createElement('a'); let event = new MouseEvent('click'); a.download = name || 'xi-yuan'; a.href = obj_url; a.dispatchEvent(event); loading.close(); }; }, dataUrlToBold(url){ let arr = url.split(','), mime = arr[0].match(/:(.*?);/)[1], bStr = atob(arr[1]), n = bStr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bStr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); }