明天中秋了，先祝大家中秋快乐！哈哈，最近见有人在群里问怎么把图片转换成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. Centos7命令行安装Tomcat以及配置防火墙开放端口

    [转载]Centos 7 yum安装tomcat 命令: 系统环境CentOS Linux release 7.2.1511 (Core) 一.搭建准备:1.先到tomcat官网https://tom ...

  2. 数组对象用map修改键名

    用vue组件需要使用的数据格式和后台返回的不一样 console.log(res); this.optionsEp = res.map(item => { return { value: ite ...

  3. C/C++ GBK和UTF8之间的转换

    { 关于GBK和UTF-8之间的转换,很多初学者会很迷茫. 一般来说GBK和UTF-8是文字的编码方式,其对应的内码是不一样的,所以GBK和UTF-8的转换需要对内码进行一一映射,然后进行转换. 对于 ...

  4. bootstrapTable 分页插件

    前端: @{ ViewBag.Title = "BootstrapTable 入门"; Layout = null; } <!-- 引入bootstrap样式 --> ...

  5. Linux常用命令入门文件、网络、系统及其他操作命令

    Linux常用命令入门文件.网络.系统及其他操作命令.压缩 归档 文件系统 系统管理 用户管理  网络管理 finger 相关命令 netstat ping rsh telnet wget 进程管理等 ...

  6. Android中当数据库需要更新时我们该怎么办？

    问题:Android数据库更新并保留原来的数据如何实现 Andoird的SQLiteOpenHelper类中有一个onUpgrade方法.帮助文档中只是说当数据库升级时该方法被触发.经过实践,解决了我 ...

  7. LUOGU P2408 不同子串个数(后缀数组)

    传送门 解题思路 后缀数组求本质不同串的裸题.\(ans=\dfrac{n(n+1)}{2} -\sum height[i]\). 代码 #include<iostream> #inclu ...

  8. BZOJ 2655: calc(拉格朗日插值)

    传送门 解题思路 首先比较容易能想到\(dp\),设\(f[i][j]\)表示前\(j\)个数,每个数\(<=i\)的答案,那么有转移方程:\(f[i][j]=f[i-1][j-1]*i*j+f ...

  9. Linux串口驱动程序(3)-打开设备

    先来分析一下串口打开的过程: 1.用户调用open函数打开串口设备文件:2.在内核中通过tty子系统,把open操作层层传递到串口驱动程序中:3.在串口驱动程序中的xx_open最终实现这个操作.这里 ...

  10. JS对象的引用，对象的拷贝

    目录 一.场景 二.浅拷贝 三.深拷贝 一.场景 除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝 将一个对象赋值给另外一个对象. var a = [1,2,3]; ...