<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. C++练习12 字符串成员函数的使用

    1 #include <iostream> 2 #include <string> 3 using namespace std; 4 int main() 5 { 6 stri ...

  2. 三天吃透Spring面试八股文（最新整理）

    本文已经收录到Github仓库,该仓库包含计算机基础.Java基础.多线程.JVM.数据库.Redis.Spring.Mybatis.SpringMVC.SpringBoot.分布式.微服务.设计模式 ...

  3. 推荐一款新的自动化测试框架：DrissionPage！

    今天给大家推荐一款基于Python的网页自动化工具:DrissionPage.这款工具既能控制浏览器,也能收发数据包,甚至能把两者合而为一,简单来说:集合了WEB浏览器自动化的便利性和 request ...

  4. Cesium CallbackProperty（十五）

    Cesium中的entities可以随时间变化长度高度,主要依赖于CallbackProperty函数. 因为使用CallbackProperty,cesium中一切可视化的要素都可以与时间联系起来. ...

  5. async异步编程屏蔽凡人

    为提高效率与增加逼格,墙裂建议引入async异步编程,这不比基于threading的线程.基于multiprocessing的进程香?这些大家伙太重量级了,代码又啰里啰唆的一点也不pythonic,只 ...

  6. Python实战项目5-Git远程仓库/分支合并/冲突解决

    Git分支 为什么要有分支 可以保证主分支的版本都是可以查看的版本 我们都在开发分支开发,开发完成 合并代码 分支操作 分支查看 git branch 分支创建 git branch 分支名 分支切换 ...

  7. Spring的注入方式

    Spring的注入方式 目录 Spring的注入方式 一.前言 二.常见的三种注入方式 2.1.Field注入 2.2 构造器注入 2.3 setter注入 三.构造器注入的好处 四.答疑 一.前言 ...

  8. dom4j解析和生成xml文件

    解析xml大致步骤: 1: 创建SAXReader: 2: 使用SAXReader解析指定的xml文档信息,并返回对应Document对象.Document对象中就包含了该xml文中的所有信息以及结构 ...

  9. C# HttpClient 上传大文件带进度

    在Httpclient 上传文件时 需要显示进度,需要添加 ProgressMessageHandler 在NuGet中添加 引用Microsoft.AspNet.WebApi.Client  一下是 ...

  10. 在npm中定义变量

    Node_Dev=Dev 在js文件里可以通过prosess.env获取该变量