js 按指定大小等比缩放预览图片

            $scope.init = function () {

                if (!FileReader) {

                    utils.showError("您的浏览器不支持HTML5，请使用现代浏览器");

                    return;

                }

                ///获取文件的浏览路径

                var getObjectURL = function (file) {

                    var url = null;

                    var blob = new Blob([file], { type: file.type });

                    if (window.createObjectURL != undefined) { // basic

                        url = window.createObjectURL(blob);

                    } else if (window.URL != undefined) { // mozilla(firefox)

                        url = window.URL.createObjectURL(blob);

                    } else if (window.webkitURL != undefined) { // webkit or chrome

                        url = window.webkitURL.createObjectURL(blob);

                    }

                    return url;

                };

                var getReviseWH = function (srcWidth, srcHeight) {

                    var targetWidth = 400;

                    var targetHeight = 400;

                    var res = {};

                    if (srcWidth > targetWidth || srcHeight > targetHeight) {

                        if (srcWidth > srcHeight) {

                            var heightFloat = parseFloat(srcHeight) / parseFloat(srcWidth);

                            heightFloat = heightFloat * targetWidth;

                            res.height = parseInt(heightFloat);

                            res.width = targetWidth;

                        }

                        else {

                            var widthFloat = parseFloat(srcWidth) / parseFloat(srcHeight);

                            widthFloat = widthFloat * targetWidth;

                            res.width = parseInt(widthFloat);

                            res.height = targetHeight;

                        }

                    }

                    else {

                        res = { width: srcWidth, height: srcHeight };

                        return res;

                    }

                    res = getReviseWH(res.width, res.height);

                    return res;

                };

                document.getElementById('uploadInput').outerHTML = document.getElementById('uploadInput').outerHTML;

                $('#uploadInput').on('change', function () {

                    if (this.files.length <= 0) return;

                    var file = this.files[0];

                    if (file.size > 2048 * 1024) {

                        utils.showError("请选择大小不超过2M的图片");

                        return;

                    }

                    var reader = new FileReader();

                    reader.onload = function (e) {

                        var img = new Image();

                        img.onload = function () {

                            var w = img.naturalWidth;

                            var h = img.naturalHeight;

                            var wh = getReviseWH(w, h);

                            var cvs = document.createElement('canvas');

                            cvs.width = wh.width;

                            cvs.height = wh.height;

                            cvs.getContext('2d').drawImage(img, 0, 0, cvs.width, cvs.height);

                            $scope.imageUri = cvs.toDataURL(file.type, 1);

                            $scope.$apply();

                        }

                        img.src = this.result;

                    }

                    reader.readAsDataURL(file);

                });

            };

            $scope.chooseImageFile = function () {

                document.getElementById('uploadInput').click();
            };

html:

<div class="panel panel-default" style="height:100%;">

    <div class="panel-heading">

        上传图片

    </div>

    <div class="panel-body">

        <div class="row" ng-bind="test"></div>

        <div class="row">

            <div class="col-lg-1"></div>

            <div class="col-lg-3"><button class="btn btn-default" ng-click="chooseImageFile()">选择图片</button></div>

            <div class="col-lg-4" style="color:red;" ng-bind="tips"></div>

            <div class="col-lg-4" style="color:black;">注：GIF在上传预览无法显示动态，上传后可正常显示</div>

        </div>

        <div class="row" style="margin-top:10px;">

            <div class="col-lg-1">预览</div>

            <div class="col-lg-8" style="padding:5px 5px 5px 5px;border:1px solid #c4c4c4;width:410px;height:410px;display:flex;justify-content:center;align-items:center;">

                <img ng-src="{{imageUri}}" />

            </div>

            <div class="col-lg-2" style="display:flex;justify-content:center;align-items:center;">

                <button class="btn btn-primary" ng-click="uploadImage()">上传</button>

            </div>

        </div>

    </div>

</div>

<input type="file" name="file" id="uploadInput" style="display:none;" />

<div style="display:none;" ng-init="init()"></div>