图片转换为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编码互相转换的更多相关文章

  1. JavaScript 图片与Base64数据互相转换脚本

    JavaScript 图片与Base64数据互相转换脚本 注: 转换过程中注意跨域问题.测试页是否支持相关标签创建.dom结构. 方法一:非Html 5使用FileReader 使用XMLHttpRe ...

  2. 用javascript实现base64编码器以及图片的base64编码

    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...

  3. 字符串与图片的Base64编码转换操作

    //图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...

  4. 图片和base64编码字符串 互相转换,图片和byte数组互相转换

    图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; ...

  5. 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  6. HTML5之图片转base64编码

    之前在群里看到很多小哥哥小姐姐讨论关于图片base64互转的方法,刚好我之前用到的一个方法给大家分享一下. <!Doctype html><html> <head> ...

  7. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. js将图片转为base64编码,以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

随机推荐

  1. Python 中運算子 + 與 * 的 Overload 方法重載功能

    字串 String 原本不能像數值一樣有加減乘除運算,但有例外.例如: >>> 'Good' + 'Morning''GoodMorning' 運算子 + 可將2個字串,串接起來. ...

  2. 个人项目开源之Django图书借阅系统源代码

    Django写的模拟图书借阅系统源代码已开源到码云 源代码

  3. 优化SQL集一

    -->寻找低效的SQL语句 ,下面的语句主要适用于从视图v$sqlarea中获得当前运行下且耗用buffer_gets较多的SQL语句                   SELECT exec ...

  4. Python numpy tensorflow 中的 点乘 和 矩阵乘法

    1)点乘(即“ * ”) ---- 各个矩阵对应元素做乘法  若 w 为 m*1 的矩阵,x 为 m*n 的矩阵,那么通过点乘结果就会得到一个 m*n 的矩阵. 若 w 为 m*n 的矩阵,x 为 m ...

  5. Python 3 线程模型,进程模型记录

    最近需要使用 python3 多线程处理大型数据,顺道探究了一下,python3 的线程模型的情况,下面进行简要记录: 多线程运行的优点: 使用线程可以把程序中占用时间较长的任务放到后台去处理: 用户 ...

  6. win7+vim搭建+verilog HDL IDE

    参考地址:http://www.huangdc.com/421 参考文章为2016年,部分更新贴于文章内了 安装下载vim vim在win下叫gvim,下载地址:https://www.vim.org ...

  7. 《细说PHP》第四版 样章 第18章 数据库抽象层PDO 8

    18.6.4  执行准备好的查询 当准备好查询并绑定了相应的参数后,就可以通过调用PDOStatement类对象中的execute()方法,反复执行在数据库缓存区准备好的语句了.在下面的示例中,向前面 ...

  8. git分支合并解决冲突

    git分支合并,解决冲突 1.手动解决冲突 手动解决冲突,需要使用编辑器,把所有文件中出现的冲突地方修改,然后再添加到暂存区再提交 >>>>>>brancha so ...

  9. apt-get failed:The following signatures were invalid: BADSIG

    参考如下链接: https://askubuntu.com/questions/131601/gpg-error-release-the-following-signatures-were-inval ...

  10. IDEA maven设置配置

    IDEA Maven配置 1. 下载maven 下载地址 从官网上,下载一个压缩包,然后解压到任意的文件夹 Maven的安装必须需要jdk1.7+ 2. 环境变量设置 M2_HOME改为具体的路径,其 ...