明天中秋了，先祝大家中秋快乐！哈哈，最近见有人在群里问怎么把图片转换成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. 125K低频唤醒芯片SI393可替代AS3933，GS3933

    2020年即将推出性能最出色的15–150kHz频率范围.3通道低频唤醒接收器,且具备自动天线调谐功能. SI393是15–150kHz频率范围.3通道低频唤醒接收器,且具备自动天线调谐功能,在软硬件 ...

  2. Delphi 消息函数 SendMessage函数

    Delphi中SendMessage使用说明 SendMessage基础知识 函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数Po ...

  3. luoguP2148 [SDOI2009]E&D [sg函数][组合游戏]

    题目描述 小E 与小W 进行一项名为“E&D”游戏. 游戏的规则如下: 桌子上有2n 堆石子,编号为1..2n.其中,为了方便起见,我们将第2k-1 堆与第2k 堆 (1 ≤ k ≤ n)视为 ...

  4. Delphi 判断某个系统服务是否存在及相关状态

    记得use WinSvc; //------------------------------------- // 获取某个系统服务的当前状态 // // return status code if s ...

  5. [bzoj1706]奶牛接力跑 题解 (矩阵快速幂(或者叫倍增Floyd？))

    Description FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们的日常锻炼项目.至于进行接力跑的地点 自然是在牧场中现有的T(2 <= T < ...

  6. html+css 常用布局

    1.中间固定宽度,两侧自适应 1.1 flex布局 <!DOCTYPE html><html lang="en"> <head> <met ...

  7. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  8. Windows 7旗舰版产品密钥

    http://www.xitongcheng.com/jiaocheng/win7_article_45903.html 一.Windows 7旗舰版产品密钥 零售版: Windows 7 Ultim ...

  9. jeecg的$.dialog的一些参数

      jeecg表单弹出框采用的技术是lhgdialog 一.配置全局默认参数 (function(config){ config['extendDrag'] = true; // 注意,此配置参数只能 ...

  10. C++——extern

    1.当它与"C"一起连用时,如: extern "C" void fun(int a, int b);则告诉编译器在编译fun这个函数名时按着C的规则去翻译相应 ...