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的 ...
随机推荐
- Python 中運算子 + 與 * 的 Overload 方法重載功能
字串 String 原本不能像數值一樣有加減乘除運算,但有例外.例如: >>> 'Good' + 'Morning''GoodMorning' 運算子 + 可將2個字串,串接起來. ...
- 个人项目开源之Django图书借阅系统源代码
Django写的模拟图书借阅系统源代码已开源到码云 源代码
- 优化SQL集一
-->寻找低效的SQL语句 ,下面的语句主要适用于从视图v$sqlarea中获得当前运行下且耗用buffer_gets较多的SQL语句 SELECT exec ...
- Python numpy tensorflow 中的 点乘 和 矩阵乘法
1)点乘(即“ * ”) ---- 各个矩阵对应元素做乘法 若 w 为 m*1 的矩阵,x 为 m*n 的矩阵,那么通过点乘结果就会得到一个 m*n 的矩阵. 若 w 为 m*n 的矩阵,x 为 m ...
- Python 3 线程模型,进程模型记录
最近需要使用 python3 多线程处理大型数据,顺道探究了一下,python3 的线程模型的情况,下面进行简要记录: 多线程运行的优点: 使用线程可以把程序中占用时间较长的任务放到后台去处理: 用户 ...
- win7+vim搭建+verilog HDL IDE
参考地址:http://www.huangdc.com/421 参考文章为2016年,部分更新贴于文章内了 安装下载vim vim在win下叫gvim,下载地址:https://www.vim.org ...
- 《细说PHP》第四版 样章 第18章 数据库抽象层PDO 8
18.6.4 执行准备好的查询 当准备好查询并绑定了相应的参数后,就可以通过调用PDOStatement类对象中的execute()方法,反复执行在数据库缓存区准备好的语句了.在下面的示例中,向前面 ...
- git分支合并解决冲突
git分支合并,解决冲突 1.手动解决冲突 手动解决冲突,需要使用编辑器,把所有文件中出现的冲突地方修改,然后再添加到暂存区再提交 >>>>>>brancha so ...
- apt-get failed:The following signatures were invalid: BADSIG
参考如下链接: https://askubuntu.com/questions/131601/gpg-error-release-the-following-signatures-were-inval ...
- IDEA maven设置配置
IDEA Maven配置 1. 下载maven 下载地址 从官网上,下载一个压缩包,然后解压到任意的文件夹 Maven的安装必须需要jdk1.7+ 2. 环境变量设置 M2_HOME改为具体的路径,其 ...