页面图片url压缩
2022-07-12 本文已影响0人
vonson
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>帜讯6.1场景demo</title>
<!--<script src="https://webapi.amap.com/maps?v=1.4.8&key=c797815e3ea2aa178fb70c56280d25fc"></script>-->
<!-- <script type="text/javascript" src="http://10.0.51.103:7050/jflaginfopc.js?v=20180701192302"></script> -->
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<input id="file" type="file" capture="microphone" accept="image/*">
<br>压缩后的图片：<span id="sz"></span>
<br><img src="https://w.wallhaven.cc/full/y8/wallhaven-y86g17.jpg">
<br><img id="pic">
<br><div id="content"></div>
<div class="abc">压缩</div>
<script>
// var detailsContent = "<p style=\"line-height: 1.5em;\"><span style=\"font-size: 14px;\">测试新闻内容111</span></p><p><img data-fileid=\"742795401471733760\" class=\"edui-upload-image\" src=\"https://zxcsv-c982b3924adb4bbd845aa374b1dece95.oss-cn-shanghai.aliyuncs.com/19031217241020012361/2022-07-08/1657262685298_wallhaven-y86g17_3840x3072.png\" style=\"\"/></p><p><img data-fileid=\"742795402759385088\" class=\"edui-upload-image\" src=\"https://zxcsv-c982b3924adb4bbd845aa374b1dece95.oss-cn-shanghai.aliyuncs.com/19031217241020012361/2022-07-08/1657262685306_wallhaven-k7q9m7_3840x3072.png\" style=\"\"/></p><p style=\"line-height: 1.5em;\"><span style=\"font-size: 14px;\"></span><br/></p>",
$(document).ready(function(){
replaceImg()
$(".abc").click(function(){
var url = 'https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg'
// cutImageBase64(url, null, 900, 0.3);
replaceImg()
// getBase64("https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg")//链接是你的网络图片
});
});
$("#file").change(function(){
var m_this = this;
cutImageBase64(m_this,null,900,0.7);
})
async function replaceImg() {
// var a = '<P><img src="http://bbs.cn.yimg.com/user_img/200701/31/jisuanji986_117025184198149.jpg"><img src="https://bbs.cn.yimg.com/user_img/200701/31/jisuanji986_117025184198149.jpg"><img src="/200701/31/jisuanji986_117025184198149.jpg"><img src="/jisuanji986_117025184198149.jpg"></P>';
// var a = "<p style=\"line-height: 1.5em;\"><span style=\"font-size: 14px;\">测试新闻内容111</span></p><p><img data-fileid=\"742795401471733760\" class=\"edui-upload-image\" src=\"https://n.sinaimg.cn/news/transform/579/w340h239/20220710/02e1-6272fb20ca98ec4d6ff878b01b060c02.jpg\" style=\"\"/></p><p><img data-fileid=\"742795402759385088\" class=\"edui-upload-image\" src=\"https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg\" style=\"\"/></p><p style=\"line-height: 1.5em;\"><span style=\"font-size: 14px;\"></span><br/></p>"
var a = "<p style=\"line-height: 1.5em;\"><span style=\"font-size: 14px;\">测试新闻内容111</span></p><p><img data-fileid=\"742795401471733760\" class=\"edui-upload-image\" src=\"https://w.wallhaven.cc/full/y8/wallhaven-y86g17.jpg\" style=\"\"/></p><p><img data-fileid=\"742795402759385088\" class=\"edui-upload-image\" src=\"https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg\" style=\"\"/></p><p style=\"line-height: 1.5em;\"><span style=\"font-size: 14px;\"></span><br/></p>"
// a 为富文本的字符串内容，为了测试，只写了img标签
var b = /<img [^>]*src=['"]([^'"]+)[^>]*>/g; // img 标签取src里面内容的正则
var s = a.match(b);// 取到所有img标签 放到数组 s里面
for (var i = 0; i < s.length; i++) {
var srcImg = s[i].replace(b, '$1'); //取src面的内容
let newUrl = await cutImageBase64(srcImg, null, 900, 0.3)
a = a.replace(new RegExp(srcImg, 'g'), newUrl); //'http://www.dlzjzx.tj.cn'自己替换的内容
// if (srcImg.slice(0, 4) == 'http' || srcImg.slice(0, 5) == 'https') {
// //若src前4位置或者前5位是http、https则不做任何修改
// console.log('不做任何修改');
// } else {
// //修改富文本字符串内容 img标签src 相对路径改为绝对路径
// a = a.replace(new RegExp(srcImg, 'g'), 'http://www.dlzjzx.tj.cn' + srcImg); //'http://www.dlzjzx.tj.cn'自己替换的内容
// }a
}
document.getElementById("content").innerHTML = a;
// setTimeout(document.getElementById("content").html = a, 3000)
}
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) {
// 此处拿到的已经是 base64的图片了
let base64 = e.target.result;
console.log("方式一》》》》》》》》》", base64)
};
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
}
function cutImageBase64(url,id,wid,quality) {
// var imgUrl = 'https://zxcsv-c982b3924adb4bbd845aa374b1dece95.oss-cn-shanghai.aliyuncs.com/19031217241020012361/2022-07-08/1657262685298_wallhaven-y86g17_3840x3072.png'
// var file = m_this.files[0];
// var URL = window.URL || window.webkitURL;
// var blob = URL.createObjectURL(file);
return new Promise((resolve, reject) => {
var base64;
var img = new Image();
// img.src = blob;
img.src = url;
img.setAttribute("crossOrigin", 'Anonymous')
console.log(img)
img.onload = function() {
var that = this;
console.log(that.width)
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = wid || w;
h = w / scale;
//生成canvas
canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({width: w,height: h});
ctx.drawImage(that, 0, 0, w, h);
// 生成base64
base64 = canvas.toDataURL('image/jpeg', quality || 0.6);
resolve(base64)
}
});
}
</script>
</body>
</html>
