JavaScript—图片与base64编码互相转换
程序员文章站
2022-04-21 16:38:56
图片转换为base64编码 base64编码转换为图片 https://blog.csdn.net/CGS_______/article/details/74078411 https://blog.csdn.net/qq_29099209/article/details/82800496 https ......
图片转换为base64编码
<input type = "file" id = "file" onchange="popfilename(this)" multiple = "multiple" name="点我上传"/>
<div id="imgcontainer"></div>
<script src="c:\users\bt.cn\desktop\jquery-3.3.1.min.js"></script>
<script>
function popfilename(that) {
var path1 = document.getelementbyid("file").value;
console.log(path1); // c:\fakepath\ddd.jpg,这不是真实路径
var path2 = document.getelementbyid("file").files[0];
var objurl = getobjecturl(that.files[0]); // 这里的objurl就是input file的真实路径
var image = new image();
image.src = objurl;
image.onload = function(){
var base64 = getbase64image(image);
console.log(base64);
$('#imgcontainer').html("<img src='" + objurl + "' width='"+image.width+"' height='"+image.height+"' id='target'/>");
}
}
// 获取上传图片文件的真实路径
function getobjecturl(file) {
var url = null;
if (window.createobjcecturl != undefined) {
url = window.createojcecturl(file);
} else if (window.url != undefined) {
url = window.url.createobjecturl(file);
} else if (window.webkiturl != undefined) {
url = window.webkiturl.createobjecturl(file);
}
return url;
}
// 得到上传图片文件的base64编码
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);
var dataurl = canvas.todataurl("image/jpeg");
return dataurl;
}
</script>
base64编码转换为图片
<div id="imgcontainer"></div>
<textarea type="text" id="s1" rows="100" cols="100"></textarea>
<div onclick="work()" id ="d1">base64编码转成图片</div>
<script src="c:\users\bt.cn\desktop\jquery-3.3.1.min.js"></script>
<script>
// 将base64转换为文件
function dataurltofile(dataurl, filename) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bytes = window.atob(arr[1]); // 去掉url的头,并转化为byte
//let n = new arraybuffer(bytes.length); // 处理异常,将ascii码小于0的转换为大于0
var n = bytes.length,
u8arr = new uint8array(n); // 生成视图(直接针对内存):8位无符号整数,长度1个字节
while(n--){
u8arr[n] = bytes.charcodeat(n);
}
// for (let i = 0; i < bytes.length; i++) {
// u8arr[i] = bytes.charcodeat(i);
// }
// return new blob([u8arr], {type: mime});
console.log(u8arr,"==>",[u8arr])
return new file([u8arr], filename, {type:mime});
}
// 获取上传图片文件的真实路径
function getobjecturl(file) {
var url = null;
if (window.createobjcecturl != undefined) {
url = window.createojcecturl(file);
} else if (window.url != undefined) {
url = window.url.createobjecturl(file);
} else if (window.webkiturl != undefined) {
url = window.webkiturl.createobjecturl(file);
}
return url;
}
function work() {
var base64 = document.getelementbyid("s1").value;
var myfile = dataurltofile(base64,'testimg');
var imgurl = getobjecturl(myfile);
$('#imgcontainer').html("<img src='" + imgurl + "' />");
// var image = new image();
// image.src = imgurl;
// image.onload = function(){
// $('#imgcontainer').html("<img src='" + imgurl + "' width='"+image.width+"' height='"+image.height+"' id='target'/>");
// }
}
</script>
https://blog.csdn.net/cgs_______/article/details/74078411
上一篇: 儿子手则