<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p>正常图片</p>

        <p></p>

        <img src="132.jpg" />

        <p></p>

        <p>base64</p>

        <p></p>

        <img src="" id="base64" alt="" />

        <p></p>

        <p></p>

        <p>base64转为二进制</p>

        <img src="" id="erjinz" alt="" />

    </body>

    <script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        /**

         * 网络图像文件转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);

            return dataURL;

        }

        /**

         *Base64字符串转二进制

         */

        function dataURLtoBlob(dataurl) {

            var arr = dataurl.split(','),

                mime = arr[0].match(/:(.*?);/)[1],

                bstr = atob(arr[1]),

                n = bstr.length,

                u8arr = new Uint8Array(n);

            while(n--) {

                u8arr[n] = bstr.charCodeAt(n);

            }

            return new Blob([u8arr], {

                type: mime

            });

        }

        //**blob to dataURL**

        function blobToDataURL(blob, callback) {

            var a = new FileReader();

            a.onload = function(e) {

                callback(e.target.result);

            }

            a.readAsDataURL(blob);

            return a;

        }

        var result;

        var img = "132.jpg";

        var image = new Image();

        image.src = img;

        image.onload = function() {

            //这样就获取到了文件的Base64字符串

            var base64 = getBase64Image(image);

            $("#base64").attr("src", base64);

            //Base64字符串转二进制

            var file = dataURLtoBlob(base64);

            //二进制转base64

            result = blobToDataURL(file, function(dataurl) {

                console.log(dataurl);

            });

            setTimeout(function() {

                $("#erjinz").attr("src", result.result);

            }, 100);

        }

    </script>

</html>

js中图片二进制和base64的互转的更多相关文章

  1. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  2. js实现图片的Blob base64 ArrayBuffer 的各种转换

    一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. Fil ...

  3. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. JS中图片飞飞效果

    当鼠标在界面上移动的时候,后面有一连串的图片跟随者一起飘动,效果如下: 实现的基本思想:准备五个img标签,为了方便控制都放在一个div里面,设置div的定位方式为 fixed,设置成这中定位方式主要 ...

  5. java实现图片文件与Base64的互转

    通过form表单上传图片时,有时候web容器对文件大小的限制会影响我们上传.这时,前端页面可以考虑将图片转换成base64串来实现上传. 图片与Base64的互转,其实就是利用了文件流与Base64的 ...

  6. ASP图片格式与base64数据互转方法

    ASP图片格式与base64数据相互转换的方法,经常用于处理表单中存储有base64字符串格式的图片. 获取到base64数据,转换成图片 <% Subfolder=year(now)& ...

  7. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  8. 认识Js中的二进制数据

    Blob 在项目中涉及到要对html原生的audio组件进行样式复写,因此需要重新实现audio的一些功能,比如下载.实现一个下载大致的思路是服务端返回一段音频的二进制数据,客户端将其存放在Blob中 ...

  9. js中图片获取src的正则

    链接: JavaScript 正则表达式:http://www.runoob.com/js/js-regexp.html js正则匹配出所有图片及图片地址src的方法:http://www.jb51. ...

  10. js中字符串的加密base64

    base64编码主要用在传输,存储表示二进制的领域,还可以进行加密和解密.其实就是字符串的编码和解码 btoa与atob 只能加密ascii,不能加密汉字. var str = 'I LOVE YOU ...

随机推荐

  1. Centos7下areaDetector IOC的编译后记

    https://github.com/EPICS-synApps/support/releases synApps出新版了,本文发文时的最新版为:R6-2 Centos7下areaDetector I ...

  2. Hibernate多表关系

    Hibernate多表关系 hibernate 一对多(多对一) 创建实体 配置ORM映射文件 创建测试文件 双方关系维护 级联操作 外键的维护权管理 双方关系维护.级联操作.外键维护权之间的关系 一 ...

  3. Cesium加载三维路线

    1. 概述 将路线加载到三维地图中,能直观显示道路的坡度变化,协同DEM和遥感影像,能极大丰富道路的可视化效果 本文此处基于Cesium,加载地形数据,叠加遥感影像,再叠加路网数据,形成三维地图,效果 ...

  4. Vscode报错： error:0308010C:digital envelope routines::unsupported错误记录解决

    Vscode报错: error:0308010C:digital envelope routines::unsupported错误记录解决 因为安装了新版本的node才报的错误:node版本: v18 ...

  5. 关于js对象的键

    面试的时候,多次被问到Object和Map的区别,我都没答上,我以为可能问原理的可能多一些... 于是今天就仔细地看了一下Object和Map的区别.网上各文章都说Object的键只能是字符串或Sym ...

  6. spring 特性

    1.Aware系列接口 spring 6.0提供了一系列的Aware接口,方便我们在Bean加载时获取信息 如 @Service public class study implements BeanN ...

  7. 2020icpc沈阳H

    优化转移DP Problem - H - Codeforces 题意 Aloha 要骑单车,可以单独花费 \(r\) 元骑 1 次,也可以购买某一种单车卡,第 \(i\) 种单车卡 \(c_i\) 元 ...

  8. maven打包找不到本地jar包的解决方法

    有时候我们在项目中会引入一些本地jar包,在maven打包时会找不到这些jar,我们需要在pom.xml中的 <pluginManagement> <plugins> < ...

  9. CentOS 7.6 部署zabbix 6.0 支持Kubernetes

    # 基础信息 系统版本: CentOS Linux release 7.6.1810 (Core) 内核版本: 4.19.0-9.el7.ucloud.x86_64 # 听说最新版的zabbix6.0 ...

  10. linux下启动jar包

    一.jdk 1.安装jdk 2.查看 摘自:(29条消息) Linux如何查看JDK的安装路径_fanyuna的博客-CSDN博客_linux查看jdk安装位置 1:echo $JAVA_HOME 使 ...