<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++练习2 强制类型转换

    const可以把有关的数据定义为常量. const类型可以修饰:对象,指针,引用 使用const_cast为强制类型转换,将常量强制转换非常量. 1 #include <iostream> ...

  2. Mybatis的常用配置-多表关联查询

    Mapper.xml常用配置 全局配置文件(数据库,事物管理,Mapper的注册.打印文件SQL.慢性加载.二级缓存) Mapper配置文件 (定义自定义接口的具体方案;SQL.数据库.数据库与POJ ...

  3. Redux Toolkit 的使用方法

    Redux Toolkit 是什么? Redux Toolkit 是 Redux 官方强烈推荐,开箱即用的一个高效的 Redux 开发工具集.它旨在成为标准的 Redux 逻辑开发模式,我们强烈建议你 ...

  4. kali挂代理之——proxychains4

    记一次打站需要用到kali,但是得挂代理,就从别人那里知道了一个kali挂代理的工具proxychains4. 首先是打开kali输入:root@Kali:~# vi /etc/proxychains ...

  5. K8S Pod Sidecar 应用场景之一-加入 NGINX Sidecar 做反代和 web 服务器

    Kubernetes Pod Sidecar 简介 Sidecar 是一个独立的容器,与 Kubernetes pod 中的应用容器一起运行,是一种辅助性的应用. Sidecar 的常见辅助性功能有这 ...

  6. pytorch学习笔记一之张量

      1. 张量¶   1.1. 概述¶   张量(tensor)是pytorch中的一种较为基础的数据结构,类比于numpy中的ndarrays,在pytorch中,张量可以在GPU中进行运算   通 ...

  7. 昇腾AI新技能，还能预防猪生病？

    摘要:日前,由华为与武汉伯生科技基于昇腾AI合作研发的"思符(SiFold)蛋白质结构预测平台"正式推出,并成功应用于国药集团动物保健股份有限公司的猪圆环病毒疫苗研发中. 本文分享 ...

  8. Solon v2.2.1 发布。向 Graalvm Native 友好靠近

    本次更新最重要的是增加了 Solon APT 项目,为更简单的完成 Graalvm Native 打包提供了帮助:其次是增加了 @ProxyComponent 和 @SolonMain 注解:以及优化 ...

  9. DOM05~

    滚动事件和加载事件 滚动事件 加载事件 滚动事件 什么是滚动事件? 1.1 当页面进行滚动时触发的事件 1.2 作用:网页需要检测用户把页面滚动到某个区域后做一些处理 1.3 事件名:scroll 监 ...

  10. 完全机器模拟浏览器操作自动刷网课！不怕被封！！-----python基于selenium实现超星学习通刷视频网课

    (使用过程中有小伙伴反映如果课程的第一章是空白的页面会报错,我当时做的时候是根据我自己的课程,没有第一节是空页面的现象,这个以后有时间我再改一下吧,或者小伙伴自己修改一下也可) 原谅我这个标题党,对叭 ...