前端实现点击下载图片

方法一:使用a标签的download属性。

<a href="1.jpg" download="1.jpg">下载图片</a>

注意：
实现点击下载的前提是要下载的图片是同源的，非IE浏览器中会直接跳转到该图片的预览地址

方法二: vue中点击触发方法下载图片

<img :src="codeImg" alt="二维码图片" style="width:60%;">
<span @click="downloadCodeImg()"></span>引入图片
import codeIMG from '@/assets/code.jpg';data中，设置图片变量
data(){codeImg:codeIMG,
}downloadCodeimg方法methods: {downloadCodeImg(){console.log('下载图片')var a = document.createElement('a')a.download = name || 'pic'// 设置图片地址a.href = codeIMG;a.click();},
}

注意：这里有一个坑。如果你的图片是从后台请求过来的，如果你的a标签的href是IP地址的话，此时a标签的download属性会失效，a会被当成一个普通的链接使用。

解决方法一：将IP地址换成域名。

解决方法二：通过后端转发，后端请求第三方资源，返回给前端，前端再保存文件。

方法三: canvas与image互转及图片下载

  //canvas转图片canvasToImage (canvas) {let image = new Image();image.src = canvas.toDataURL('image/png');return image;}//图片转canvasimageToCanvas (image) {let canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;canvas.getContext('2d').drawImage(image, 0, 0)}//图片转化base64var img = "imgurl";//imgurl 就是你的图片路径  function getBase64Image(img) {  var canvas = document.createElement("canvas");  canvas.width = img.width;  canvas.height = img.height;  var ctx = canvas.getContext("2d");  ctx.drawImage(img, 0, 0, img.width, img.height);  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  var dataURL = canvas.toDataURL("image/"+ext);  return dataURL;
}  var image = new Image();
image.src = img;
image.onload = function(){  var base64 = getBase64Image(image);  console.log(base64);
} //图片下载imageDownLoad (image) {let aLink = document.createElement('a');aLink.href = image.src;aLink.download = 'test.png';document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink)}

canvas标签是可以右键保存的，但是这样还是不够友好，如果点击按钮下载，那就最好不过了
思路：

a标签可以下载资源的
只要把canvas转成base64的格式放在href里就好了

实现1：

<a href="" download="test" id="download">下载</a>
<script>var dataURL = canvas.toDataURL("image/png");var a = document.getElementById("download");a.setAttribute("href",dataURL);
</script>

实现2：
1.由button触发事件创建一个a标签
2.a标签绑定事件流，触发点击事件

<button onclick="download()">下载</button>
<script>var saveFile = 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);}function download(){var dataURL = canvas.toDataURL("image/png");saveFile(dataURL,'test.jpg');}
</script>

方法四: 图片都转成base64解决跨域问题

方法一：Blob和FileReader 对象
实现原理：
使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”]
使用FileReader 对象接收blob

<p id="container1"></p><script>getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")function getBase64(imgUrl) {window.URL = window.URL || window.webkitURL;var xhr = new XMLHttpRequest();xhr.open("get", imgUrl, true);// 至关重要xhr.responseType = "blob";xhr.onload = function () {if (this.status == 200) {//得到一个blob对象var blob = this.response;console.log("blob", blob)// 至关重要let oFileReader = new FileReader();oFileReader.onloadend = function (e) {let base64 = e.target.result;console.log("方式一》》》》》》》》》", base64)};oFileReader.readAsDataURL(blob);//====为了在页面显示图片，可以删除====var img = document.createElement("img");img.onload = function (e) {window.URL.revokeObjectURL(img.src); // 清除释放};let src = window.URL.createObjectURL(blob);img.src = srcdocument.getElementById("container1").appendChild(img);//====为了在页面显示图片，可以删除====}}xhr.send();}</script>

方式二：canvas.toDataURL()方法

实现原理：
使用canvas.toDataURL()方法
需要解决图片跨域问题 image.crossOrigin = ‘’;
使用了Jquery库的$.Deferred()方法

<p id="container2"></p><script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script>let imgSrc = "https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg";//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小function getBase64Image(img, width, height) {var canvas = document.createElement("canvas");canvas.width = width ? width : img.width;canvas.height = height ? height : img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, canvas.width, canvas.height);var dataURL = canvas.toDataURL();return dataURL;}function getCanvasBase64(img) {var image = new Image();//至关重要image.crossOrigin = '';image.src = img;//至关重要var deferred = $.Deferred();if (img) {image.onload = function () {deferred.resolve(getBase64Image(image));//将base64传给done上传处理document.getElementById("container2").appendChild(image);}return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']}}getCanvasBase64(imgSrc).then(function (base64) {console.log("方式二》》》》》》》》》",base64);}, function (err) {console.log(err);});</script>

前端实现点击下载图片相关推荐

JS实现浏览器点击下载图片
点击下载图片分两种: 1.一种是同源地址图片(也就是本地本项目中的图片): 2.另一种是不同源的图片:(不同域名下,比如阿里云七牛云上的图片) 下面我们就具体说一下这两种图片下载的方式: 第一种(同 ...
运用canvas将两张图片画在一起，生成一张新的图片，然后实现点击下载图片
运用canvas将两张图片img1,img2画在一起,生成一张新的图片img3,然后实现点击下载图片img3 代码如下: <!DOCTYPE html> <html lang=&qu ...
【jQuery】jQuery与vue实现点击下载图片以及js实现批量打包下载图片
原理:用canvas的toDataUrl() API获取到图片的base64编码,再利用触发a标签事件进行下载.(单张图片下载) 多张图片批量下载导出压缩包需要引入jsZip jQuery实现点击下载 ...
HTML里的a链接download 属性浏览器js点击下载图片
1.<a>download下载图片具有兼容性所以需做兼容处理,使其兼容IE,就比较完美了. 2.最近有这方面的需求,从网上看了一些资料,拿过来不能直接使用,把他们整合了一下,作为笔记,方 ...
【vue下载】vue 点击下载图片直接打开问题解决
问题: 点击下载按钮,用a标签的download属性,会在当前页直接打开图片使用base64转换也还是如此最后用了blob转换,问题解决 <el-button type="text ...
html 点击下载图片
<a href="./download_code.png" download="" style="text-decoration:none;co ...
js实现a标签点击下载图片和txt等文件，而不是浏览器打开预览
function downloadFile(url) {console.log(url)const link = document.createElement('a')fetch(url).then( ...
JavaScript 实现前端下载图片
JavaScript 实现前端下载图片前几天公司的项目有个需求,实现点击下载图片功能,当时我就想着还不简单嘛,当即写下以下代码: const download = document.createEl ...
JS将图片转化为base64编码，并实现点击下载，js实现图片下载的实操博客
背景需求在前端的工作中,经常碰到点击下载图片的需求,但是有一种情况大家经常碰到,就是点击下载地址之后,在浏览器窗口默认打开了,并没有调用浏览器进行下载如果你正在完善这个需求,一直解决不了,恭喜你看 ...