将本地图片上传获得base64

$('.courseimgupload input').change(function(e) {
       console.info(e.target.files[0]);//图片文件
        var dom =$("input[id^='imgTest']")[0];
        console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
               console.info(this.result); //这个就是base64的数据了
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
});

把页面中的图片变成base64的数据

<!--这里先放上一张图片-->
<img>

<input type="button" onclick="imgChaneBase64()" value="img标签绘制到canvas" /><br />
<!--引入html2canvas-->
<script type="text/javascript" src="/lib/html2canvas/html2canvas.js"></script>
<script type="text/javascript">
    function imgChaneBase64() {
        //将要变成base64的图片的html标签当参数传进来，这里如果将document传进来，就会将整个页面变成图片，在then中会返回一个canvas
        html2canvas(document.getElementById("img")).then(function(canvas) {
            console.info(canvas);
            var imgData = canvas.toDataURL("image/png"); //这里会将canvas转化为base64的数据
            document.body.appendChild(canvas); //页面鼠标右击这个标签时会提示保存图片，保存之后会以png格式保存

        });
    }
</script>

 注：这里利用的是截屏的原理，将html内容变成base64的，所有其实不是真的将这个图片变成base64

获取本地图片width 和height

$('#imgf').change(function(e) {
     console.info(e.target.files[0]);//图片文件
        var dom =$("input[id^='imgf']")[0];
        console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
              // console.info(this.result); //这个就是base64的数据了
               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]);
});