html 5画像をbase 64コードに変換

参照リンク:https://www.jianshu.com/p/90fc1f9042a8

の利点:httpリクエストを減らすことができ、一定の暗号化機能を有する.

欠点:ピクチャ符号化base 64の場合はサイズが大きくなるが、gzip最適化により基本差は

少ない.

なので、アプリケーションの過程で小さいピクチャはbase 64に直接符号化することができ、大きいピクチャはこのような使用を推奨しない.

h 5のインタフェースFileReader.readAsData URL()は、ファイルをbase 64符号化フォーマットに変換し、data:URLの形式で表示することができる.
例:

    
        
        
    
    
        
        window.onload = function(){ 
        //       ，      ，     dom
        var img_upload=document.getElementById("img_upload");
        var base64_code=document.getElementById("base64_code");
        var img_area=document.getElementById("img_area");
        //           
        img_upload.addEventListener('change',readFile,false);}
        function readFile(){
            var file=this.files[0];
            if(!/image\/\w+/.test(file.type)){ 
                alert("          "); 
                return false; 
            }
            var reader=new FileReader();
            reader.readAsDataURL(file);
            reader.function(){
                base64_code.innerHTML = this.result; 
                img_area.innerHTML = '<div>  img    ：</div><img src="'+this.result+'" alt=""/>'; 
            }
        }
        
        
                <p id="img_area"/>
    


```
</code></pre> 
 </div> 
</div>
                            </div>
                        </div>