<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. Thymeleaf的内置对象、SpringBoot整合Thymeleaf和JDBC

    Thymeleaf的对象 Thymeleaf是直接支持访问Servlet web的原生资源,HttpServletRequest HttpServletResponse HttpSession Ser ...

  2. 研究c#异步操作async await状态机的总结

    前言 前一段时间得闲的时候优化了一下我之前的轮子[DotNetCoreRpc]小框架,其中主要的优化点主要是关于RPC异步契约调用的相关逻辑.在此过程中进一步了解了关于async和await异步操作相 ...

  3. 功放世界web新手区

    第一题:view_source: 顾名思义就是查看网页源代码,按一下f12就ok 第二题:robots协议 换言之就是,robots协议告诉了我们,什么可以爬,什么不可以爬,要是觉得坐牢没什么,那就可 ...

  4. redis（13）持久化操作-AOF

    AOF(Append Only File) 以日志的形式来记录每个写操作(增量保存),将 Redis 执行过的所有写指令记录下来 (读操作不记录), 只许追加文件但不可以改写文件,redis 启动之初 ...

  5. AOP中的一些重要术语简介

    AOP的定义:AOP(Aspect Oriented Progamming)利用称为"横切"的技术,剖解开封装的对象内部,把多个类的公共行为封装到一个可重用模块中,便于减少重复代码 ...

  6. pat 乙级 1025 反转链表

    目前无法ac过最后一个测试点,其余ac,原因是有无效节点存在,但这个代码加上去除无效节点函数时便会运行超时 还没想出来怎么做,先这样吧 #include <stdio.h> #includ ...

  7. PHP实现QQ第三方登录代码

    前言: PHP实现QQ快速登录,罗列了三种方法 方法一:面向过程,回调地址和首次触发登录写到了一个方法页面[因为有了if做判断], 方法二,三:面向对象 1.先调用登录方法,向腾讯发送请求,2.腾讯携 ...

  8. offer_48

    题目:写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 思路: /* 首先看十进制是如何做的: 5+7=12,三步走 第一步:相加各位的值,不算进位,得到2. 第二步:计 ...

  9. 使用python往已有内容的PDF文件写入数据

    只使用reportlab库好像没法在已经有内容的PDF页面中写入数据,只能生成一个空的PDF文件再写入.所以这里我是配合pdfrw库来实现的.具体见示例 from reportlab.pdfgen.c ...

  10. JS 动态获取 Url 参数(封装函数）

    话不多说直接上代码: 封装函数如下: (如果urls固定,可以只写一个name变量) getQueryString(name, urls) { var url = urls; // 获取URL // ...