Question

我正在上传图片。当我使用范围滑块预览调整大小图像时，图像大小不应该改变，而应该缩放图像。

如何实现这一点，任何人都可以建议这样做。

    <input id="fileMobile" type="file" ngf-select ng-model="file" name="file" ng-click="thumbnailshow()" ngf-pattern="'image/*'"
                                                                                    ngf-max-size="3MB" />

                                                                                <i ng-show=" Form.file.$error.pattern" style="color: red;"> File format allows only JPG, JPEG, PNG </i>
                                                                                <i ng-show=" Form.file.$error.maxSize" style="color: red;">File too large max-size:4MB </i>
                                                                                </br>
                                                                                <img width="275" height="95" ng-show="!!file" ngf-thumbnail="file" id="imageId"
                                                                                 />
    <div class="col-md-9">                                                                               
<label>Resize Image</label>                                                                             
 <input type="range" id="rangeId" min=0 max="100">                                                                         
  </div>

controller.js

var ranger = document.getElementById('rangeId'),
              image = document.getElementById('imageId');     
              width = image.width,
             height = image.height;

        ranger.onchange = function () 
        {

image.width = width *（ranger.value / 100）; image.height = height *（ranger.value / 100）; } //它正在放大图像，但在使用范围滑块更改时。当我上传图片时，它正在上传原始图片。

当我更改范围滑块时，我需要缩放图像，图像部分的缩放部分只需要在文件上传时使用。

  var imageformat = '';
        var vm = this;
        $scope.uploadFile = function (file) { //function to call on form submit
              LogoUploads(file);

        }


        var LogoUploads = function (file) {
              if (file != undefined) {
                    Upload.upload({
                          url: '/LogoUploads', //webAPI exposed to upload the file
                          data: { file: file } //pass file as data, should be user ng-model
                    }).then(function (resp) { //upload function returns a promise
                          console.log(resp);
                          $scope.FileName = resp.config.data.file.name;
                          imageformat = resp.config.data.file.type.split('/');
                          if (imageformat[1] == "jpeg") {
                                imageformat[1] = "jpg";
                          }
                          if (imageformat[1] == "png") {
                                imageformat[1] = "png";
                          }

                          ImageName = resp.data;
                          $scope.imagename = ImageName;

                          if ($scope.FileName != "" && $scope.FileName != undefined) {
                                UpdateInfo();

                          }

我可以将此css应用于我输入类型“范围”它会缩放图像

提前致谢

使用范围控制调整大小时缩放图像并保存图像

0 个答案: