美文网首页Flutter
file图片获取图片base64及获取宽高

file图片获取图片base64及获取宽高

作者: 寒梁沐月 | 来源:发表于2016-12-02 15:29 被阅读2963次

    将本地图片上传获得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]);
    });
    
    
    

    相关文章

      网友评论

        本文标题:file图片获取图片base64及获取宽高

        本文链接:https://www.haomeiwen.com/subject/sncqmttx.html