base64
https://juejin.cn/post/6844903698045370376
https://juejin.cn/search?query=base64
前端图片处理方式
https://juejin.cn/post/6844903782959022093
https://www.jb51.net/article/138809.htm
base64 下载格式为base64的图片
https://zhuanlan.zhihu.com/p/28176700
https://www.cnblogs.com/anxiaoyu/p/10958722.html
js图片下载功能
https://juejin.cn/search?query=js图片下载&sort=2
https://juejin.cn/post/6844904094398677000
https://juejin.cn/post/6844903699496566792
图片转base64-实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 图片转base64方式</title>
</head>
<body>
<script>
var url = 'https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg'
var url = 'http://e.hiphotos.baidu.com/image/pic/item/1c950a7b02087bf49661186dffd3572c10dfcfa1.jpg'
var url = 'http://p1.pstatp.com/large/435d000085555bd8de10'
function getImageBase64(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
}
function imgUrl(url) {
const image = new Image();
image.src = url;
image.setAttribute("crossOrigin", "anonymous");
image.onload = function () {
var base64 = getImageBase64(image);
console.log('base64: ', base64);
}
}
imgUrl(url)
</script>
</body>
</html>
图片转base64-实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 图片转base64方式</title>
</head>
<body>
<p id="container1"></p>
<script>
var url = 'https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg'
var url = 'http://e.hiphotos.baidu.com/image/pic/item/1c950a7b02087bf49661186dffd3572c10dfcfa1.jpg'
var url = 'http://p1.pstatp.com/large/435d000085555bd8de10'
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 = src
document.getElementById("container1").appendChild(img);
//====为了在页面显示图片，可以删除====
}
}
xhr.send();
}
getBase64(url)
</script>
</body>
</html>
图片下载功能实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://e.hiphotos.baidu.com/image/pic/item/1c950a7b02087bf49661186dffd3572c10dfcfa1.jpg" download>下载</a>
<a href="http://118.117.161.203:8038/camerafile/0516/20210531/20210531_092442_0516_20210531_092442.jpg"
download>下载</a>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
var imgUrl = 'http://e.hiphotos.baidu.com/image/pic/item/1c950a7b02087bf49661186dffd3572c10dfcfa1.jpg'
var imgUrl2 = 'http://118.117.161.203:8038/camerafile/0516/20210531/20210531_092442_0516_20210531_092442.jpg'
let script = document.createElement('script');
script.src = 'http://118.117.161.203:8038?&callback=callback';
document.body.appendChild(script);
function callback(res) {
console.log(res);
}
function imgToBase64(imgSrc, imgName) {
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')
// 生成一个a元素
var a = document.createElement('a')
// 创建一个单击事件
var event = new MouseEvent('click')
// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
a.download = imgName || '下载图片名称'
// 将生成的URL设置为a.href属性
a.href = url
// 触发a的单击事件
a.dispatchEvent(event)
}
image.src = imgSrc;
}
imgToBase64(imgUrl2, 2)
</script>
</body>
</html>