为什么预览时图像显示模糊？答案

【问题标题】：why image is shown blur while preview?为什么预览时图像显示模糊？
【发布时间】：2019-10-23 02:12:52
【问题描述】：

我正在使用以下插件上传图片 https://www.npmjs.com/package/ng-file-upload

但是当我选择图像时，它会显示模糊图像，为什么？

.thumb {
    width: 100px;
    height: 100px;
    float: none;
    position: relative;
    top: 7px;
}

【问题讨论】：

原始图像有多大？看起来你正在拉伸图像
你可以使用任何图像。图像太大
为什么要进行图像拉伸？

标签： javascript angularjs image-uploading

【解决方案1】：

您可以像这样调整图像大小并设置照片质量我继续删除了您的拇指类。另外，文档的链接在这里。NgUploadFeatures

 <fieldset>
  <legend>Upload on form submit</legend>
  Username:

  <input ngf-resize="{width: 100, height: 100, quality: .8, type: 'image/jpeg',  centerCrop: true, pattern='.jpg', restoreExif: true}" type="file" ngf-select ng-model="picFile" name="file"    
         accept="image/*" ngf-max-size="2MB" required
         ngf-model-invalid="errorFile">
  <i ng-show="myForm.file.$error.required">*required</i><br>
  <i ng-show="myForm.file.$error.maxSize">File too large 
      {{errorFile.size / 1000000|number:1}}MB: max 2M</i>
  <img   ng-show="myForm.file.$valid" ngf-thumbnail="picFile" > <button ng-click="picFile = null" ng-show="picFile">Remove</button>
  <br>
  <button ng-disabled="!myForm.$valid" 
          ng-click="uploadPic(picFile)">Submit</button>
  <span class="progress" ng-show="picFile.progress >= 0">
    <div style="width:{{picFile.progress}}%" 
        ng-bind="picFile.progress + '%'"></div>
  </span>
  <span ng-show="picFile.result">Upload Successful</span>
  <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</fieldset>

【讨论】：