zoukankan      html  css  js  c++  java
  • Angular里使用(image-compressor.js)图片压缩

    参考资料:

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

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

     示例代码:

    <nz-upload 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)">
                    <ng-container *ngIf="!imageUrl">
                        <i nz-icon nzType="picture" nzTheme="outline"></i>
                        <div class="ant-upload-text">上传</div>
                    </ng-container>
                    <img *ngIf="imageUrl" [src]="imageUrl" class="avatar" style="100px;height: 100px;">
                </nz-upload>
                <p>请上传jpg, gif, png格式的图片。建议图片尺寸&nbsp;宽:90px;高:90px</p>
    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;
            }
    学习本无底,前进莫徬徨。 好好学习,天天向上。
  • 相关阅读:
    史上最简洁的handler原理解释
    handler解惑
    Http中get和post的区别
    使用软引用缓存Bitmap
    Request头和Response头
    DNS编程实验--域名与IP的相互转换
    CString与string
    C++ string占多少个字节测试
    java中类的继承性和多态性实例
    java寻找html文件中的标签
  • 原文地址:https://www.cnblogs.com/24klr/p/11591890.html
Copyright © 2011-2022 走看看