图片转base64 

   function convertImgToBase64(url, callback, outputFormat){ 
        var canvas = document.createElement('CANVAS'); 
        var ctx = canvas.getContext('2d'); 
        var img = new Image; 
        img.crossOrigin = 'Anonymous'; 
        img.onload = function(){
          var width = img.width;
          var height = img.height;
          // 按比例压缩4倍
          var rate = (width<height ? width/height : height/width)/4;
          canvas.width = width*rate; 
          canvas.height = height*rate; 
          ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate); 
          var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
          callback.call(this, dataURL); 
          canvas = null; 
        };
        img.src = url; 
      }

convertImgToBase64("http://img3.imgtn.bdimg.com/it/u=4271053251,2424464488&fm=21&gp=0.jpg", function(base64Img){
              // base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
              console.log(base64Img);
              // base64转图片不需要base64的前缀data:image/jpg;base64
             
            }
)

 转本地 图片 base64 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>简单的html5 File测试 for pic2base64 本地图片</title> 
<style> 
</style> 
<script> 
window.onload = function(){ 
    var input = document.getElementById("demo_input"); 
    var result= document.getElementById("result"); 
    var img_area = document.getElementById("img_area"); 
    if ( typeof(FileReader) === 'undefined' ){ 
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！"; 
            input.setAttribute( 'disabled','disabled' ); 
    } else { 
            input.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); //转化为base64位
        reader.onload = function(e){ 
                result.innerHTML = '<img src="'+this.result+'" alt=""/>'; 
                img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>'; 
        } 
} 
</script> 
</head>  
<body> 
<input type="file" value="sdgsdg" id="demo_input" /> 
<textarea id="result" rows=30 cols=300></textarea> 
<p id="img_area"></p> 
</body> 
</html>

 

posted on 2016-11-25 13:15  蝌蚪的精神  阅读(164)  评论(0)  编辑  收藏  举报

导航