图片转换为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中看下结果就是下边这样
