图片转换为base64

明天中秋了，先祝大家中秋快乐！哈哈，最近见有人在群里问怎么把图片转换成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中看下结果就是下边这样