JavaScript—图片与base64编码互相转换
图片转换为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
https://blog.csdn.net/qq_29099209/article/details/82800496
https://www.cnblogs.com/MainActivity/p/8550895.html
https://www.jianshu.com/p/e26aaca7e201
https://segmentfault.com/q/1010000012560812/a-1020000012562058
https://www.cnblogs.com/freeliver54/p/11002194.html
https://www.cnblogs.com/wangqiideal/p/5056918.html
JavaScript—图片与base64编码互相转换的更多相关文章
- JavaScript 图片与Base64数据互相转换脚本
JavaScript 图片与Base64数据互相转换脚本 注: 转换过程中注意跨域问题.测试页是否支持相关标签创建.dom结构. 方法一:非Html 5使用FileReader 使用XMLHttpRe ...
- 用javascript实现base64编码器以及图片的base64编码
前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...
- 字符串与图片的Base64编码转换操作
//图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...
- 图片和base64编码字符串 互相转换,图片和byte数组互相转换
图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; ...
- 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用
前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...
- HTML5之图片转base64编码
之前在群里看到很多小哥哥小姐姐讨论关于图片base64互转的方法,刚好我之前用到的一个方法给大家分享一下. <!Doctype html><html> <head> ...
- JS 获取图片的base64编码
获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- H5 Js图片转base64编码
<!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js将图片转为base64编码,以字符串传到后台存入数据库
(前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...
随机推荐
- Rewrite基本概述
Rewrite基本概述 什么是rewrite Rewrite主要实现url地址重写,以及重定向,就是把传入web的请求重定向到其他url的过程. rewrite使用场景 1.地址跳转,用户访问www. ...
- manjaro安装后的配置
1.添加中科大源 参考https://blog.csdn.net/liyunfu233/article/details/87381017 sudo nano /etc/pacman.conf 在文末添 ...
- goroutine并发之callback回调
玩玩 package main import ( "fmt" "strings" "sync" ) var wait sync.WaitGr ...
- xampp配置二级域名通过不同端口访问不同网站
首先需要在xampp\apache\conf\extra\httpd-vhost.conf中写入配置的二级域名 <VirtualHost *:8081> // 该网站通过监测8081端口 ...
- Re-stheasy
https://dn.jarvisoj.com/challengefiles/ctf2.b93676be23733b2fcda3988c1133c1c1 用IDA-32bit 打开,找到main函数 ...
- centos7删除MariaDB怎么操作
有时我们要在centos上安装一些组件,需要先把原来的数据库删除,比如MariaDB,不然就出现冲突错误,那么如何删除数据库呢?首先查询所安装的MariaDB组件: [root@localhost l ...
- 配置SQL Server维护计划-定时备份
目录 创建维护计划 创建任务 配置维护计划的依赖环境 还原数据库 创建维护计划 打开SQL Server 2014 Management Studio,用SQL Server管理员账户登录. 展开Ma ...
- perl: warning: Setting locale failed. 解决
perl: warning: Setting locale failed. perl: warning: Please check that your locale settings: LANGUAG ...
- Java连载41-this关键字其他注意事项、static方法
一.this关键字 1.this在多数情况下都会省略 2.this不能用在含有static的方法之中. 3.static的方法的调用是不需要对象的,直接使用格式:类名.方法名:没有当前对象,自然不能访 ...
- spring cloud 2.x版本 Gateway动态路由教程
摘要 本文采用的Spring cloud为2.1.8RELEASE,version=Greenwich.SR3 本文基于前面的几篇Spring cloud Gateway文章的实现. 参考 Gatew ...