明天中秋了，先祝大家中秋快乐！哈哈，最近见有人在群里问怎么把图片转换成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. nginx自动切割日志脚本

    #!/bin/bash savepath_log='/data/logs' nglogs='/data/logs' mkdir -p $savepath_log/$(date +%Y)/$(date ...

  2. php上传文件（简易版）

    1.前台form表单处添加 enctype="multipart/form-data" 2. //上传文件保存到目录 header("content-type:text/ ...

  3. 函数计算工具链新成员 —— Fun Local 发布啦

    刚刚,我们发布了函数计算工具链的新成员,Fun Local.欢迎大家使用! 如果你还不了解 Fun 是什么,我们来简单解释下. Fun 是什么 Fun 是 have Fun with Serverle ...

  4. 【LeetCode 7】整数反转

    题目链接 [题解] 没什么说的. 就注意一点. 可以在*10+n%10的时候. 顺便判断有没有溢出. (直接用longlong可真是机制..) [代码] class Solution { public ...

  5. python内置模块-json和pickle

    安装第三方库     pip3 install requests     源码安装:下载源码,解压后切换到当前目录     执行python setup.py install   json和pickl ...

  6. 装nginx遇到的坑 未完待续

    首装nginx时 server { listen 8066;  监听端口号 server_name localhost;   监听地址 location / goldwind{   root /roo ...

  7. CSS：CSS padding（填充）

    ylbtech-CSS:CSS padding(填充) 1.返回顶部 1. CSS padding(填充) CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的 ...

  8. Perl 换行打印

    #!/usr/bin/perl$, = "\t";$\ = "\n"; for($i=0;$i<3;$i++){ print("i: " ...

  9. PAT_A1024#Palindromic Number

    Source: PAT A1024 Palindromic Number (25 分) Description: A number that will be the same when it is w ...

  10. DDOS到底是什么，怎么预防，看看就明白了

    可怕的DDOS怎么预防 分布式拒绝服务(DDoS: distributed denial-of-service)攻击是恶意破坏目标服务器.服务或网络的正常通信量的企图,其方法是用大量Internet通 ...