HTML5|前端实现点击下载图片
方法一:使用a标签的download属性。
下载图片
注意：
实现点击下载的前提是要下载的图片是同源的，非IE浏览器中会直接跳转到该图片的预览地址
方法二: vue中点击触发方法下载图片
文章图片
="downloadCodeImg()">引入图片
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 = https://www.it610.com/article/codeIMG;
a.click();
},
}
注意：这里有一个坑。如果你的图片是从后台请求过来的，如果你的a标签的href是IP地址的话，此时a标签的download属性会失效，a会被当成一个普通的链接使用。
解决方法一：将IP地址换成域名。
解决方法二：通过后端转发，后端请求第三方资源，返回给前端，前端再保存文件。
方法三: canvas与image互转及图片下载
//canvas转图片
canvasToImage (canvas) {
let image = new Image();
image.src = https://www.it610.com/article/canvas.toDataURL('image/png');
return image;
}//图片转canvas
imageToCanvas (image) {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext('2d').drawImage(image, 0, 0)
}
//图片转化base64
var 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 = https://www.it610.com/article/img;
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
} //图片下载
imageDownLoad (image) {
let aLink = document.createElement('a');
aLink.href = https://www.it610.com/article/image.src;
aLink.download ='test.png';
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink)
}canvas标签是可以右键保存的，但是这样还是不够友好，如果点击按钮下载，那就最好不过了
思路：
- a标签可以下载资源的
- 只要把canvas转成base64的格式放在href里就好了
下载
>
var dataURL = canvas.toDataURL("image/png");
var a = document.getElementById("download");
a.setAttribute("href",dataURL);
实现2：
1.由button触发事件 创建一个a标签
2.a标签 绑定事件流，触发点击事件
>
var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = https://www.it610.com/article/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');
}
方法四: 图片都转成base64解决跨域问题
方法一：Blob和FileReader 对象
实现原理：
使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”]
使用FileReader 对象接收blob
>
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 = https://www.it610.com/article/window.URL.createObjectURL(blob);
img.src = src
document.getElementById("container1").appendChild(img);
//====为了在页面显示图片，可以删除====
}
}
xhr.send();
}
方式二：canvas.toDataURL()方法
实现原理：
使用canvas.toDataURL()方法
需要解决图片跨域问题 image.crossOrigin = ‘’;
使用了Jquery库的$.Deferred()方法
="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
>
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 = https://www.it610.com/article/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);
});
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM
- pytorch|使用pytorch从头实现多层LSTM