將本地圖片上傳獲得base64

$('.courseimgupload input').change(function(e) {
       console.info(e.target.files[0]);//圖片文件
        var dom =$("input[id^='imgTest']")[0];
        console.log(e.target.value);//這個(gè)也是文件的路徑和上面的dom.value是一樣的
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
               console.info(this.result); //這個(gè)就是base64的數(shù)據(jù)了
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
});

把頁(yè)面中的圖片變成base64的數(shù)據(jù)

<!--這里先放上一張圖片-->
<img>

<input type="button" onclick="imgChaneBase64()" value="img標(biāo)簽繪制到canvas" /><br />
<!--引入html2canvas-->
<script type="text/javascript" src="/lib/html2canvas/html2canvas.js"></script>
<script type="text/javascript">
    function imgChaneBase64() {
        //將要變成base64的圖片的html標(biāo)簽當(dāng)參數(shù)傳進(jìn)來(lái)，這里如果將document傳進(jìn)來(lái)，就會(huì)將整個(gè)頁(yè)面變成圖片，在then中會(huì)返回一個(gè)canvas
        html2canvas(document.getElementById("img")).then(function(canvas) {
            console.info(canvas);
            var imgData = canvas.toDataURL("image/png"); //這里會(huì)將canvas轉(zhuǎn)化為base64的數(shù)據(jù)
            document.body.appendChild(canvas); //頁(yè)面鼠標(biāo)右擊這個(gè)標(biāo)簽時(shí)會(huì)提示保存圖片，保存之后會(huì)以png格式保存

        });
    }
</script>

 注：這里利用的是截屏的原理，將html內(nèi)容變成base64的，所有其實(shí)不是真的將這個(gè)圖片變成base64

獲取本地圖片width 和height

$('#imgf').change(function(e) {
     console.info(e.target.files[0]);//圖片文件
        var dom =$("input[id^='imgf']")[0];
        console.log(e.target.value);//這個(gè)也是文件的路徑和上面的dom.value是一樣的
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
              // console.info(this.result); //這個(gè)就是base64的數(shù)據(jù)了
               var img = new Image();
               img.src=this.result;
               img.onload = function (argument) {
                console.log(this.width +'----------'+this.height)  //這里就是上傳圖片的寬和高了
               }
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
});