明天中秋了，先祝大家中秋快乐！哈哈，最近见有人在群里问怎么把图片转换成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. vue插件安装

    百度云下载插件   https://pan.baidu.com/s/13QhPilzJa8yu3HvKCt47Pw 学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看 ...

  2. jedate(日期插件)

    首先要引入JQuery,然后引入jedate.css和jedate.js(注:需要把下载好的jedate文件夹整个的放在项目中,不然图标无法显示) 没有把整个文件夹放进去的效果            ...

  3. mac MAMP安装redis扩展

    一般情况下目录大概是一样的,只是php的版本不同,所以选择好自己对应的php版本目录即可 git clone https://github.com/nicolasff/phpredis.git cd ...

  4. Java中基本类型的包装类

    基本类型包装类: 项目中我们常常放弃基本类型,用基本类型的包装类 基本类型包装类有哪些: Int--Integer char--Character double--Double 以Intger为例讲述 ...

  5. leetcode-164周赛-1267-统计参与通信的服务器

    题目描述: 自己的提交: class Solution: def countServers(self, grid: List[List[int]]) -> int: from collectio ...

  6. 二叉堆 与 PriorityQueue

    堆在存储器中的表示是数组,堆只是一个概念上的表示.堆的同一节点的左右子节点都没有规律. 堆适合优先级队列(默认排列顺序是升序排列,快速插入与删除最大/最小值). 数组与堆 堆(完全二叉树)(构造大顶堆 ...

  7. 阿里小程序Serverless 操作指南

    小程序云 小程序云(Mini Program Cloud)是阿里云面向小程序场景提供的一站式云服务,帮助开发者实现一云多端的业务战略,提供了有服务器和无服务器两种模式.云应用是有服务器模式,提供了包括 ...

  8. HDU 4279 Number 坑爹的迷之精度

    题目描述 首先定义"special number": 如果对于一个数字B,存在一个数字A(0<A<=B),并同时满足 B%A=0 和 gcd(A,B) != 1 ,那么 ...

  9. Ajax请求参数为文件类型

    1.图片用get请求,回调函数中返回的数据就是流文件(至于是什么流文件还不清楚), 在回调函数中再使用post请求2.JS将文件像form表单一样提交到后台  :  https://www.cnblo ...

  10. JAVA并发工具类---------------(CountDownLatch和CyclicBarrier)

    CountDownLatch是什么 CountDownLatch,英文翻译为倒计时锁存器,是一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 闭锁可以延迟线程的进 ...