明天中秋了，先祝大家中秋快乐！哈哈，最近见有人在群里问怎么把图片转换成base64格式，之前刚好写过就把代码贴出来。

主要用到canvas中的toDataURL方法

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="content-type" content="text/html; charset=UTF-8">

         <title>Image to Base64 - jsFiddle demo by handtrix</title>

         <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>

         <link rel="stylesheet" type="text/css" href="/css/result-light.css" rel="external nofollow">

         <style type='text/css'>

             @import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');

             body {

                 padding: 20px;

             }

         </style>

         <script type='text/javascript'>

             //<![CDATA[

             $(window).load(function() {

                 /**

                 * convertImgToBase64

                 * @param {String} url

                 * @param {Function} callback

                 * @param {String} [outputFormat='image/png']

                 * @author HaNdTriX

                 * @example

                 convertImgToBase64('http://goo.gl/AOxHAL', function(base64Img){

                 console.log('IMAGE:',base64Img);

                 })

                 */

                 function convertImgToBase64(url, callback, outputFormat) {

                     var canvas = document.createElement('CANVAS');

                     var ctx = canvas.getContext('2d');

                     var img = new Image;

                     img.crossOrigin = '*';

                     img.onload = function() {

                         canvas.height = img.height;

                         canvas.width = img.width;

                         ctx.drawImage(img, 0, 0);

                         var dataURL = canvas.toDataURL(outputFormat || 'image/png');

                         callback.call(this, dataURL);

                         canvas = null;

                     };

                     img.src = url;

                 }

                 $('#img2b64').submit(function(event) {

                     var imageUrl = $(this).find('input[name=url]').val();

                     console.log('imageUrl', imageUrl);

                     convertImgToBase64(imageUrl, function(base64Img) {

                         $('.output')

                             .find('textarea')

                             .val(base64Img)

                             .end()

                             .find('a')

                             .attr('href', base64Img)

                             .text(base64Img)

                             .end()

                             .find('img')

                             .attr('src', base64Img);

                     });

                     event.preventDefault();

                 });

             }); //]]>

         </script>

     </head>

     <body>

         <h2>Input</h2>

         <form class="input-group" id="img2b64">

             <input type="url" name="url" class="form-control" placeholder="Insert an IMAGE-URL" value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" required>

             <span class="input-group-btn">

               <input type="submit" class="btn btn-default">

             </span>

         </form>

         <hr>

         <h2>Output</h2>

         <div class="output">

             <textarea class="form-control"></textarea><br>

             <a></a><br><br>

             <img><br>

         </div>

     </body>

 </html>

可以直接复制到一个html中看下结果就是下边这样

图片转换为base64的更多相关文章

  1. 将图片转换为base64 格式

    1.页面上的图片,转换成base64格式,可以通过canvas 的 toDataURL 例子:给定图片的url 将图片转换为base64 var imageSrc = "../images/ ...

  2. js 图片转换为base64

    <input id="file" type="file"> <img id="img" style="max-h ...

  3. JAVA 将图片转换为Base64编码

    这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...

  4. C# 图片转换为base64

    WebRequest webRequest = WebRequest.Create("验证码url"); WebResponse webResponse = webRequest. ...

  5. 【PHP】图片转换为base64，经过post传输后‘+’会变成 ‘空格’

    图片转换为base64,经过post传输后‘+’会变成 ‘空格’, 需要用PHP 处理一下 $str= $_POST['img_data']; $str= str_replace(' ','+',$s ...

  6. C# Base64字符串转换成图片及图片转换为Base64

    最近有朋友经常会问我一些问题,例如,如何把一个字符串转换成base64字符串,如何把一个二进制文件转换成Base64文件,以及如何转换回原有的文件,在此我把方法写一下   字符串与Base64相互转换 ...

  7. 将图片转换为Base64编码的字符串

    图片以文件的形式存在,可以在表单中使用. 也可以转换成Base64编码的字符串,从而在css.js中以字符串的形式使用图片.例如,在css中设置背景图片.在js中用ajax上传图片. <!DOC ...

  8. js小工具---本地图片转换为base64编码数据

    今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据.所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用. 效果 ...

  9. C#中图片转换为Base64编码，Base64编码转换为图片

    #region 图片转为base64编码的字符串 public string ImgToBase64String(string Imagefilename) { try { Bitmap bmp = ...

  10. Java图片转换为base64格式

    /** * @Descriptionmap 将图片文件转化为字节数组字符串,并对其进行Base64编码处理 * @author temdy * @Date 2015-01-26 * @param pa ...

随机推荐

  1. java反射技术主要实现类有哪些，作用分别是什么

    Java反射技术主要实现类有哪些,作用分别是什么? 在JDK中,主要由以下类来实现Java反射机制,这些类都位于java.lang.reflect包中 1)Class类:代表一个类 2)Field 类 ...

  2. js 连等操作，，

    奥术大师 var hu = { a : , c : , name : }; (function (){ var ccc = bbb = aaa = hu; })() console.log(bbb)* ...

  3. 1、cmd中检测远程的ip和端口是否处于监听状态

    一.使用 ping 命令测试远程的ip是否可连通 cmd  (右键 管理员角色) ---  ping   IP 二.使用 telnet 测试远程某一个ip的端口是否开放 1.为了安全起见,window ...

  4. git——commit成功后，GitHub方格不变绿

    一通百度该设置的都设置了,还是不好使 发现有提示一栏 pull request的东西  在网上查貌似是因为两个分支内容不同 提示是否合并,还查到了不变绿可能的原因. Contributions未被Gi ...

  5. CSS格式化---属性排序

    一.背景 与同事合作开发一个项目,后面修改 CSS 时,发现属性顺序跟我写的不一样 我从事开发前端时,导师是有给我大概指定了一定的书写规范 现在开发时,看到的 CSS 属性排序不一样,看起来有点难受( ...

  6. 51nod 1149 Pi的递推式(组合数学)

    传送门 解题思路 首先因为\(Pi\)不是整数,所以不能直接递推.这时我们要思考这个式子的实际意义,其实\(f(i)\)就可以看做从\(i\)这个点,每次可以向右走\(Pi\)步或\(1\)步,走到[ ...

  7. CentOS7编译安装MPLAYER！！！

    Linux装软件就是折磨人!! Mplayer官网下好release版本 然后./configure --[options] 注意:--prefix=/usr/local/mplayer 是安装路径- ...

  8. Codeforces gym102222 B.Rolling The Polygon 凸包/余弦定理

    题意: 有一个不保证凸的多边形,让你滚一圈,计算某点滚出的轨迹多长. 题解: 求出凸包后,以每个点为转轴,转轴到定点的距离为半径,用余弦定理计算圆心角,计算弧长. #include<iostre ...

  9. JAVA中HashMap相关知识的总结(一)

    Java中HashMap在jdk1.7和jdk1.8中的区别点: 在jdk1.7中是用数组+链表形式存储,1.8采用数组+链表/红黑树形式 Jdk1.8中由链表转为红黑树是长度大于8,由红黑树转为链表 ...

  10. Dubbo入门到精通学习笔记（四）：持续集成管理平台之Maven私有库和本地库的安装与配置

    文章目录 介绍 Maven私有库和本地库的安装与配置 Nexus安装 Nexus 配置(登录后) 介绍 如果构建的Maven项目本地仓库没有对应的依赖包,那么就会去Nexus私服去下载, 那么如果Ne ...