目录
一、根据后端接口返回的URL下载和预览图片
1、调用下载图片函数实现下载图片
// 下载图片
/*
* imgsrc 图片地址
* name 图片下载后的名字【包含图片后缀】 如"a.jpg"
*/
function downloadIamge(imgsrc, 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"); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
},
2、弹出另一个页面，实现预览图片。
// 第一种
function previewImg (imgsrc) {
window.location.href = imgsrc;
}
// 第二种
function previewImg (record) {
let record.urlPath = '图片的url地址'
let record.tzName= '网页打开显示的名称'
let newWindow = window.open('')
newWindow.document.body.innerHTML = '<img src="' + record.urlPath + '" alt="">'
newWindow.document.title = record.tzName
}
3、不弹出另一个页面，实现下载/预览图片（iframe方式）
<template>
<span class="eye" @click="eyeImg(record)"><a-icon type="eye"/>查看</span>
<span class="download" @click="downloadImg (record)"><a-icon type="download"/>下载</span>
<iframe style="display: none;" :src="downUrl" frameborder="0"></iframe>
</template>
<script>
export default {
data () {
return {
downUrl: ''
}
},
methods: {
downloadImg (record) {
this.downUrl = record.urlPath
}
}
}
</script>
4、动态创建iframe，实现下载图片。
downloadPhoto = () => {
const { photoUrl } = this.state;
let elemIF = document.createElement('iframe');
elemIF.src = photoUrl;
elemIF.style.display = 'none';
document.body.appendChild(elemIF);
}
5、iframe基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.flexbox {
display: flex;
height: 100vh;
width: 100%;
}
.leftbox {
width: 200px;
background-color: #ffcccc;
}
.rightbox {
flex: 1;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="flexbox">
<div class="leftbox"></div>
<div class="rightbox">
<!-- iframe属性：src显示的文档的 URL -->
<!-- iframe属性：frameborder是否显示 <iframe> 周围的边框：0不显示，1显示 -->
<!-- iframe属性：scrolling是否在 <iframe> 中显示滚动条：no不显示，yes显示 -->
<iframe src="iframe-content.html" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"
scrolling="no"></iframe>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.iframeclass {
width: 10000px;
height: 10000px;
background-color: rgb(112, 112, 112);
}
</style>
</head>
<body>
<div class="iframeclass">
<p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>
<p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>
<p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>
<p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
</div>
</body>
</html>
6、a标签实现下载功能（同域和跨域）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<!-- a 标签下载 -->
<a href="/04-a标签下载功能/test.png" download="demo">下载</a>
<!-- 其他标签实现下载 同域 -->
<div onclick="download()">下载</div>
<!-- 其他标签实现下载 跨域 -->
<div onclick="download1()">下载</div>
</div>
<script>
// 同域
function download(
url = '/04-a标签下载功能/test.png',
title = 'demo2',
artist = 'down'
) {
const eleLink = document.createElement('a') // 新建A标签
eleLink.href = url || '/04-a标签下载功能/test.png' // 下载的路径
eleLink.download = `${title} - ${artist}` // 设置下载的属性，可以为空
eleLink.style.display = 'none'
document.body.appendChild(eleLink)
eleLink.click() // 触发点击事件
document.body.removeChild(eleLink)
}
// 跨域
function download1(
url = 'https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
title = 'demo3',
artist = 'down'
) {
var x = new XMLHttpRequest()
x.open('GET', url, true)
x.responseType = 'blob'
x.onload = function () {
const url = window.URL.createObjectURL(x.response)
const eleLink = document.createElement('a')
eleLink.href = url
eleLink.download = `${title} - ${artist}`
eleLink.style.display = 'none'
document.body.appendChild(eleLink)
eleLink.click()
document.body.removeChild(eleLink)
}
x.send()
}
</script>
</body>
</html>
二、图片url转化为base64文件和file类型文件
第一种方法：先转base64再转file
1、定义两个方法
//图转base64
export const function imageToBase64 (img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
console.log(img,canvas)
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;
}
//图转base64
export const base64ToFile = (urlData, fileName) => {
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bytes = atob(arr[1]); // 解码base64
let n = bytes.length
let ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new File([ia], fileName, { type: mime });
}
2、调用刚才的2个方法
import { imageToBase64, base64ToFile } from "@/utils/img.js";
created() {
//调用方法 【url仅参考】
let url = 'https://testwq.jk.net/uploads/20200701/111fa8095def5bd296332f7eac01e400.jpg';
this.handleImgToBase64(url, (res) => {
// 接收回调结果
console.log('回调结果', res);
});
},
methods: {
/**
* url: 图片路径
* cb: callback
*/
handleImgToBase64(url, cb) {
let that = this; // 不知道有啥用
var image = new Image();
// image.setAttribute("crossOrigin",'Anonymous'); //设置图片跨域防止canvas生成内容时报错
image.crossOrigin = '';
image.src = url;
image.onload = function () {
let base64 = imageToBase64(image); //图片转base64
let file = base64ToFile(base64, 'file'); //base64转File
// 根据自身需求调整【因个人项目逻辑不一样，这里使用回调函数】
cb && typeof cb == 'function' && cb(file);
return file;
}
},
}
第二种方法：XMLHttpRequest
function getImageFileFromUrl(url, imageName) {
return new Promise((resolve, reject) => {
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.setRequestHeader('Accept', 'image/jpeg');
xhr.responseType = "blob";
xhr.onload = () => {
blob = xhr.response;
let imgFile = new File([blob], imageName, { type: 'image/jpeg' });
resolve(imgFile);
};
xhr.onerror = (e) => {
reject(e)
};
xhr.send();
});
}
三、File文件转base64格式
通过FileReader对象读取存储文件内容
说明：
readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容
/**
* file： file文件
*/
base64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
}
使用：
<input type="file" @change="previewFile">
var file = e.target.files[0];
this.base64(file);
四、base64的编码和解码
atob和btoa是window对象的两个函数，用来编码解码Base64。
1、btoa：编码
var str = "This is a string";
var encoded_str = btoa(str);
console.log(encoded_str); // Outputs: "VGhpcyBpcyBhIHN0cmluZw=="
2、但是不能编码Unicode字符
3、如何让btoa支持Unicode字符编码
编码时，先用encodeURIComponent对字符串进行编码，再进行btoa进行Base64编码
解码时，先用atob对Base64编码的串进行解码，再用decodeURIComponent对字符串进行解码
var str = "hello,中国";
var encoded_str = btoa(encodeURIComponent(str));
var decoded_str = decodeURIComponent(atob(encoded_str));
console.log(encoded_str); // Outputs: "aGVsbG8lMkMlRTQlQjglQUQlRTUlOUIlQkQ="
console.log(decoded_str); // Outputs: "hello,中国"
4、atob：解码
var encoded_str = "VGhpcyBpcyBhIHN0cmluZw==";
var str= atob(encoded_str);
console.log(str); // Outputs: "This is a string"
五、图片转换js （img对象，file对象，base64，canvas对象），以及图片压缩方式
参考链接：https://blog.csdn.net/twtcqw2008/article/details/80766914
2782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
