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

主要用到canvas中的toDataURL方法

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.          <title>Image to Base64 - jsFiddle demo by handtrix</title>
  7.  
  8.          <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
  9.  
  10.          <link rel="stylesheet" type="text/css" href="/css/result-light.css" rel="external nofollow">
  11.  
  12.          <style type='text/css'>
  13.              @import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
  14.              body {
  15.                  padding: 20px;
  16.              }
  17.          </style>
  18.  
  19.          <script type='text/javascript'>
  20.              //<![CDATA[
  21.              $(window).load(function() {
  22.                  /**
  23.                  * convertImgToBase64
  24.                  * @param {String} url
  25.                  * @param {Function} callback
  26.                  * @param {String} [outputFormat='image/png']
  27.                  * @author HaNdTriX
  28.                  * @example
  29.                  convertImgToBase64('http://goo.gl/AOxHAL', function(base64Img){
  30.                  console.log('IMAGE:',base64Img);
  31.                  })
  32.                  */
  33.                  function convertImgToBase64(url, callback, outputFormat) {
  34.                      var canvas = document.createElement('CANVAS');
  35.                      var ctx = canvas.getContext('2d');
  36.                      var img = new Image;
  37.                      img.crossOrigin = '*';
  38.                      img.onload = function() {
  39.                          canvas.height = img.height;
  40.                          canvas.width = img.width;
  41.                          ctx.drawImage(img, 0, 0);
  42.                          var dataURL = canvas.toDataURL(outputFormat || 'image/png');
  43.                          callback.call(this, dataURL);
  44.                          canvas = null;
  45.                      };
  46.                      img.src = url;
  47.                  }
  48.                  $('#img2b64').submit(function(event) {
  49.                      var imageUrl = $(this).find('input[name=url]').val();
  50.                      console.log('imageUrl', imageUrl);
  51.                      convertImgToBase64(imageUrl, function(base64Img) {
  52.                          $('.output')
  53.                              .find('textarea')
  54.                              .val(base64Img)
  55.                              .end()
  56.                              .find('a')
  57.                              .attr('href', base64Img)
  58.                              .text(base64Img)
  59.                              .end()
  60.                              .find('img')
  61.                              .attr('src', base64Img);
  62.                      });
  63.                      event.preventDefault();
  64.                  });
  65.              }); //]]>
  66.          </script>
  67.      </head>
  68.  
  69.      <body>
  70.          <h2>Input</h2>
  71.          <form class="input-group" id="img2b64">
  72.              <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>
  73.              <span class="input-group-btn">
  74.                <input type="submit" class="btn btn-default">
  75.              </span>
  76.          </form>
  77.          <hr>
  78.          <h2>Output</h2>
  79.          <div class="output">
  80.              <textarea class="form-control"></textarea><br>
  81.              <a></a><br><br>
  82.              <img><br>
  83.          </div>
  84.      </body>
  85.  
  86.  </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的HashMap和Hashtable有什么区别HashSet和HashMap有什么区别？使用这些结构保存的数需要重载的方法是哪些？

    HashMap与Hashtable实现原理相同,功能相同,底层都是哈希表结构,查询速度快,在很多情况下可以互用 两者的主要区别如下 1.Hashtable是早期JDK提供的接口,HashMap是新版J ...

  2. Add cast to是什么意思

    eclipse中是强制类型转换的意思.

  3. 【leetcode】951. Flip Equivalent Binary Trees

    题目如下: For a binary tree T, we can define a flip operation as follows: choose any node, and swap the ...

  4. How To Use PostgreSQL with Your Ruby on Rails Application on Ubuntu 14.04

    How To Use PostgreSQL with Your Ruby on Rails Application on Ubuntu 14.04 链接来自于:https://www.digitalo ...

  5. Sql生成 Insert 语句

    declare @TableName sysname select @TableName = 'T_OOSOrder' declare @result varchar(max) = 'INSERT I ...

  6. json path espressions的语法学习

    json path espressions的语法学习 $:跟对象\元素 @:当前对象\元素 ?():应用过滤器(脚本)表达式 如: { "store": {    "bo ...

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

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

  8. The 2019 Asia Nanchang First Round Online Programming Contest(B,E)

    B. Fire-Fighting Hero 题意:一个消防员和多个队伍比赛,比较所有地方的最短路的最大值,消防员最后的值要乘1/C,求胜利的一方的最短路的最大值是多少.一直没读懂正确题意(内疚). 思 ...

  9. JUC源码分析-线程池篇（二）FutureTask

    JUC源码分析-线程池篇(二)FutureTask JDK5 之后提供了 Callable 和 Future 接口,通过它们就可以在任务执行完毕之后得到任务的执行结果.本文从源代码角度分析下具体的实现 ...

  10. MySQL慢查询日志分割

    mysql> set global slow_query_log=0; Query OK, 0 rows affected (0.00 sec)   mysql> set global s ...