<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. Java 如何通过JDBC 操作数据库

    JDBC 是Java 数据库连接,即 Java DataBase Connectivity.JDBC 可让Java 通过程序操作关系型数据库,可基于驱动程序实现与数据库的连接与操作.JDBC 有统一的 ...

  2. Zstack使用经验系列1-安装的网络配置

    https://www.zstack.io/help/product_manuals/maintenance_manual/4.html 在官网上从这里有详细的安装,读者可以从上面链接开始起步装起来. ...

  3. 【源码】RapidJSON 源码剖析(0.1)：调试工具 GDB 的使用

    [源码]RapidJSON 源码剖析(0.1):调试工具 GDB 的使用 正式开始源码阅读之前,有必要了解一下源码阅读中用到的调试工具 GDB. GDB(GNU Debugger) 是一种可以运行在多 ...

  4. Cesium用wsad进行场景漫游(九)

    2023-01-14 先看效果,wsadqe控制方向升降,鼠标拖动屏幕也可以控制方向 整理下思路: 1. 使用movement变量控制是否进行漫游 2.1 进行漫游则先将enableRotate等全部 ...

  5. JZOJ 4320. 【NOIP2015模拟11.5】旅行

    题目 思路 不想写了,直接使用 没错,关键就在求第 \(k\) 小的路径 上述提到堆的做法,我们可以用 \(STL\) 的优先队列来实现 只不过常数有点大~~~ \(Code\) #include&l ...

  6. TrueNAS安装 一个厉害的nas系统

    转载: 戴俊财--个人学习网站 https://www.daijuncai.cn/?p=128

  7. python pip 升级失败解决方法

    今天花了一上午学习python,然后现在在研究做爬虫,结果发现python提示pip需要更高的版本,然后就研究了半天,解决方法如下: 一.检查版本: pip show pip 二.更新版本: pyth ...

  8. 为了安装alien，我更新了yum源，结果还是没装上

    前几天把自己的thinkpad E430C从win7系统装成了centos7,看过<周末折腾了两天,踩了无数个坑,终于把win7装成了centos7>的小伙伴都知道,为了把win7装成ce ...

  9. lama-cleaner全部命令行参数

    usage: main.py [-h] [--host HOST] [--port PORT] [--config-installer] [--load-installer-config] [--in ...

  10. 【6】java之数组的定义和使用

    一.数组的定义与使用 1.1 数组的基本概念 数组指的就是一组相关变量的集合. 数组的定义: 声明并开辟数组 数据类型 数组名称 [] = new 数据类型[长度]: 数据类型 [] 数组名称 = n ...