图片转DATA:URI工具

昨晚由于需要用data:uri，于是做了这么个转换工具
可本地使用，因为文件不用上传
疯狂的点击这里看demo
截图[此截图使用datauri,看不见请升级人品]

上面这张图的datauri

1

data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAA / QAAAJBCAIAAABnN2lHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAACSDSURBVHhe7dpdcms5sh7QGq0n5 / CTp + E59YWYWzgQ / jZIUX1K6bWCoUhkfgBZ9VLp9v3nf / 2 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LPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQRL/G/+c//wNAn/5fp2D0CgAAAABJRU5ErkJggg==

datauri优点：
在页面添加图片不用额外上传文件了！
还有什么就不知到了
缺点：
无法缓存，每次加载页面都要载入（其实想缓存它只要用js文件复制给变量就行了，而且可以一个文件存N张图，和图片分割异曲同工啊）
浏览器支持不全面
转出来的字符串体积一般比原文件大= =。。。

demo源码[部分参考其他网站]<!doctype html>
<html>
    <head>
        <title>
            文件转DATA URI
        </title>
        <meta charset='utf-8'>
    </head>
    <body>
        <div id="droparea" style="height:30px;line-height:30px;background-color:#66ccff;width:126px; text-align:center;">
            把图片拖到这里
        </div>
        [其实我发现除了图片以外还可以拖其它任何文件进来，只不过下面的预览图会裂掉另外最好不要把超过1MB的文件拉进来，不然你懂的]
        <br>
        PS:如果同时拖入多个文件，只操作第一个，拖入文件夹无效
        <br>
        <img id='view' src='' />
        <br />
        <textarea style="height:600px;width:1000px;" id='text'>
        </textarea>
        <script>
            var droparea = document.getElementById('droparea');
            var viewimg = document.getElementById('view');
            var showdataarea = document.getElementById('text');
            droparea.addEventListener("dragenter", dragenter, false);
            droparea.addEventListener("dragover", dragover, false);
            droparea.addEventListener("drop", drop, false);
            function handlefiles(files) {
                var file;
                file = files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    //viewimg.src = e.target.result;
                    viewimg.src = reader.result;
                    showdataarea.innerHTML = e.target.result;
                };
                reader.readAsDataURL(file);
            }
            function dragenter(e) {
                e.stopPropagation();
                e.preventDefault();
            }
            function dragover(e) {
                e.stopPropagation();
                e.preventDefault();
            }
            function drop(e) {
                e.stopPropagation();
                e.preventDefault();
                var list = e.dataTransfer;
                var filelist = list.files;
                handlefiles(filelist);
            }
        </script>
    </body>
 
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

< html >      < head >          < title >             文件转 DATA URI          < / title >      < / head >      < body >          < div id = "droparea" style = "height:30px;line-height:30px;background-color:#66ccff;width:126px; text-align:center;" >             把图片拖到这里          < / div >          [其实我发现除了图片以外还可以拖其它任何文件进来，只不过下面的预览图会裂掉另外最好不要把超过 1MB的文件拉进来，不然你懂的 ]          < br >          PS :如果同时拖入多个文件，只操作第一个，拖入文件夹无效          < br >          < img id = 'view' src = '' / >          < br / >          < textarea style = "height:600px;width:1000px;" id = 'text' >          < / textarea >          <script>              var droparea = document . getElementById ( 'droparea' ) ;              var viewimg = document . getElementById ( 'view' ) ;              var showdataarea = document . getElementById ( 'text' ) ;              droparea . addEventListener ( "dragenter" , dragenter , false ) ;              droparea . addEventListener ( "dragover" , dragover , false ) ;              droparea . addEventListener ( "drop" , drop , false ) ;              function handlefiles ( files ) {                  var file ;                  file = files [ 0 ] ;                  var reader = new FileReader ( ) ;                  reader . onload = function ( e ) {                      viewimg . src = e . target . result ;                      showdataarea . innerHTML = e . target . result ;                  } ;                  reader . readAsDataURL ( file ) ;              }              function dragenter ( e ) {                  e . stopPropagation ( ) ;                  e . preventDefault ( ) ;              }              function dragover ( e ) {                  e . stopPropagation ( ) ;                  e . preventDefault ( ) ;              }              function drop ( e ) {                 e . stopPropagation ( ) ;                  e . preventDefault ( ) ;                  var list = e . d ;                  var filelist = list . files ;                  handlefiles ( filelist )              }          </script>      < / body >   < / html >