Angular里使用(image-compressor.js)图片压缩

参考资料:

http://www.imooc.com/article/40038

https://github.com/xkeshi/image-compressor

 示例代码:

class="avatar-uploader" [nzAccept]="'image/*'" nzFileType="image/png,image/jpeg,image/gif,image/jpg" [nzAction]="uploadPictureUrl" nzName="avatar" nzListType="picture-card" [nzShowUploadList]="false" [nzCustomRequest]="uploadImp" (nzChange)="handleChange($event)">
                "!imageUrl">
                    "picture" nzTheme="outline">
                    
class="ant-upload-text">上传
"imageUrl" [src]="imageUrl" class="avatar" style="width:100px;height: 100px;">

请上传jpg, gif, png格式的图片。建议图片尺寸 宽:90px;高:90px

import ImageCompressor from 'image-compressor.js'
// 自定义上传方法的实现
  uploadImp = async (item) => {
    debugger
    const isJPG = item.file.type.indexOf('image') > -1;
    if (!isJPG) {
      this.message.error('只能上传图片文件!');
      return;
    }
    // 进行图片压缩
    const compressionFile = await new ImageCompressor().compress(item.file, {
      quality: .8,
      maxWidth: 1000,
      maxHeight: 1000,
      convertSize: 614400, //超过600kb压缩
      success(result) {
      },
      error(e) {
        console.log(e);
        debugger
        throw { message: `压缩失败${e.message}` }
      }
    }).then(ret => {
      debugger
      console.log(ret);
      item.file = ret;
      if (ret.size > 600 * 1024) throw { message: '压缩后的图片不能超过600KB' };
      const formData = new FormData();
      formData.append('file', item.file, item.file.name);
      this.http.post(this.uploadPictureUrl, formData).subscribe(result => {
        debugger
      });
    }).catch((err) => {
      const msg = err.message ? err.message : err;
      this.message.error(`图片上传失败,请重试:${msg}`);
    });
}
public string UploadImgToOss()
        {
            var file = Request.Form.Files.FirstOrDefault();
            if (file == null)
                throw new UserFriendlyException(L("FileInfo_Change_Error"));
            var fileInfo = new FileInfo(file.FileName);

            var fileExt = Path.GetExtension(file.FileName);
            byte[] fileBytes;

            string url = "";
            using (var stream = file.OpenReadStream())
            {
                
                fileBytes = stream.GetAllBytes();

                if (!ImageFormatHelper.GetRawImageFormat(fileBytes).IsIn(ImageFormat.Jpeg, ImageFormat.Png, ImageFormat.Gif))
                {
                    throw new UserFriendlyException("请上传图片文件,仅接受Jpg、PNG、Gif三种格式!");
                }

                var upLoadPath = "/Upload/" + DateTime.Now.ToString("yyyy") + "/" + DateTime.Now.ToString("MM") + "/";
                var newFileName = $"{DateTime.Now:yyyyMMddHHmmss}_{Guid.NewGuid():n}_{fileExt}";

                var data = new MemoryStream(fileBytes);
                var result = OssDrive.UpLoad(newFileName, data);    
                if (!result.Status)
                {
                    throw new UserFriendlyException(result.Message);
                }
                url = "http://" + result.Data.Url;
            }
            return url;
        }

 

你可能感兴趣的:(Angular里使用(image-compressor.js)图片压缩)