範囲コントロールを使用して画像のサイズを変更しながら画像を拡大して保存する

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 =幅*（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を適用することができ、入力タイプ「範囲」、それは画像をズームします事前

Answer 1

で

おかげで、あなたのイメージの幅と高さを変更しないようにしてください。ズームを使用したい場合は、 "transform：scale（2）"を使用してください。