参考资料:

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="width: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') > -;
if (!isJPG) {
this.message.error('只能上传图片文件!');
return;
}
// 进行图片压缩
const compressionFile = await new ImageCompressor().compress(item.file, {
quality: .,
maxWidth: ,
maxHeight: ,
convertSize: , //超过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 > * ) 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)图片压缩的更多相关文章

  1. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  2. js图片压缩和上传并显示

    由于近期项目中需要做个图片压缩上传,所以就在网上找了些资料自己写了一个 html部分 <input id="file" type="file"> & ...

  3. js 图片压缩上传(base64位)以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  4. js图片压缩+ajax上传

    图片压缩用到了localresizeimg 地址: https://github.com/think2011/localResizeIMG 用起来比较简单 <input type="f ...

  5. JS—图片压缩上传(单张)

    *vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...

  6. 无组件客户端js图片压缩

    <div class="free-upload"> <p>上传您的约会照片,一张合影.一张票据哦!</p> <div class=&quo ...

  7. js 图片压缩上传(纯js的质量压缩,非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  8. js图片压缩

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. js图片压缩上传

    最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码 ...

随机推荐

  1. git下载代码的两种方式以及eclipse集成git

    1.第一种使用tortoiseGit插件: 链接:https://pan.baidu.com/s/1ANDydwfaaVcUaqZDJWc_BQ 提取码:qgxt a.首先在setting中的Git中 ...

  2. Java进阶知识08 Hibernate多对一单向关联(Annotation+XML实现)

    1.Annotation 注解版 1.1.在多的一方加外键 1.2.创建Customer类和Order类 package com.shore.model; import javax.persisten ...

  3. 2017 ICPC乌鲁木齐 A Coins 概率dp

    Coins 题意:一开始所有n个硬币都是反面朝上的,每次必须拿k个来抛,抛的人足够聪明,问m次之后向上的硬币的期望. 首先说了这个足够聪明的意思,就是只要向反面的有k个就不会sb地去拿向正面的来抛,想 ...

  4. Web安全(白帽子讲)之第一章

    安全问题的本质是信任的问题,并是一个持续的过程. 安全三要素 Confidentiality:机密性-----要求保护数据内容不能泄密 Integrity:完整性-----要求保护数据内容的完整,没有 ...

  5. ACM之路(13)—— 树型dp

    最近刷了一套(5题)的树型dp题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=116767#overview,算是入了个门,做下总结. ...

  6. CF883H

    CF883H 题意: 给你一个字符串,需要把它以最小的划分次数划分为x个长度相等的回文串,可以重新排列. 解法: 大模拟一个. 分别统计出现一次的字符和出现两次的字符,如果没有出现一次的字符,那么所有 ...

  7. golang——reverse反转字符串

    reverse反转,是个比较基础算法.要实现这个方法,从常理考虑可以申请一个新空间,然后将字符串的从尾到头依次填充该空间,最后新空间的内容就是反转后的结果了,这个方式的算法复杂度是O(n),并且还需要 ...

  8. 提交本地文件至gitlab已有的项目中(更新gitlab)

    gitlab代码更新 gitlab官网 1.安装git git官网 官网下载安装,安装过程一直next即可(路径自己选) 2.clone至本机 格式:git clone url(可转到指定目录克隆) ...

  9. np数组转换函数

    1.多维数组降为一维: a = np.arange(24) np.ravel(a)或者a.ravel a.flatten 2.数据类型转换 a = a.astype(np.float32) //tf是 ...

  10. POJ3009-Curling 2.0(WA)

    POJ3009-Curling 2.0 题意: 要求把一个冰壶从起点“2”用最少的步数移动到终点“3” 其中0为移动区域,1为石头区域,冰壶一旦想着某个方向运动就不会停止,也不会改变方向(想想冰壶在冰 ...