zoukankan      html  css  js  c++  java
  • web app上传图片

    以前,web app上传图片需要通过cordova插件

     后来一个html标签就可以了

    <input type="file" class="upload" capture="camera"  accept="image/*" onchange="angular.element(this).scope().uploadhead(this)" />
    

     js里的代码:

            $scope.uploadhead = function(file) {
                fileSelected(file);
            }
    
            function fileSelected(obj) {
                if (obj) {
                    var file = obj.files[0];
                    if (ImgCompress.checkType(file)) {
                        ImgCompress.getBase64(file, obj, getBase);
                    }
                }
            }
    
            function getBase(data) {
                $("#myavatar").attr("src", data);
            }
    
            var ImgCompress = {
    
                checkType: function(file) {
                    if (!file.type.match('image.*')) {
                        return false;
                    } else {
                        return true;
                    }
                },
    
                getBase64: function(file, obj, callBack) {
                    var _this = this;
                    _this.readFile(file, obj, callBack);
                },
    
                readFile: function(file, obj, callBack) {
                    var _this = this;
                    //读取文件
                    if (window.FileReader) {
                        var fr = new FileReader();
                        fr.onloadend = function(e) {
                            //显示图片
                            var src = e.target.result;
    
                            //压缩图片获取base64编码
                            _this.compress(src, callBack);
    
                        };
                        fr.readAsDataURL(file);
                    } else {
                        alert("请使用高版本浏览器!");
                    }
                },
    
                compress: function(src, callBack) {
                    var _this = this;
                    var img = new Image();
                    img.src = src;
                    img.onload = function() {
                        //生成比例
                        var width = img.naturalWidth,
                            height = img.naturalHeight,
                            scale = width / height;
                        width = parseInt(750);
                        height = parseInt(width / scale);
    
                        //生成canvas
                        var $canvas = document.createElement("canvas");
                        var ctx = $canvas.getContext('2d');
                        $canvas.width = width;
                        $canvas.height = height;
    
                        //压缩
                        ctx.drawImage(img, 0, 0, width, height);
                //这里转成jpeg,也可以不转 callBack($canvas.toDataURL(
    'image/jpeg', 0.5)); } } };
  • 相关阅读:
    webpack4配置详解之常用插件分享
    eslint 配置
    获取数组的随机数
    封装一个拖拽
    R语言常用语法和用法
    关于异或操作和它的算法题
    算法题:整形数组找a和b使得a+b=n
    最小生成树的一些证明
    python multiprocessing 使用
    python decorator的本质
  • 原文地址:https://www.cnblogs.com/johnzhu/p/5897290.html
Copyright © 2011-2022 走看看