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="width:100px;height: 100px;">
</nz-upload>
<p>请上传jpg, gif, png格式的图片。建议图片尺寸 宽: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)图片压缩的更多相关文章
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- js图片压缩和上传并显示
由于近期项目中需要做个图片压缩上传,所以就在网上找了些资料自己写了一个 html部分 <input id="file" type="file"> & ...
- js 图片压缩上传(base64位)以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
- js图片压缩+ajax上传
图片压缩用到了localresizeimg 地址: https://github.com/think2011/localResizeIMG 用起来比较简单 <input type="f ...
- JS—图片压缩上传(单张)
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
- 无组件客户端js图片压缩
<div class="free-upload"> <p>上传您的约会照片,一张合影.一张票据哦!</p> <div class=&quo ...
- js 图片压缩上传(纯js的质量压缩,非长宽压缩)
下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...
- js图片压缩
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js图片压缩上传
最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码 ...
随机推荐
- Docker 阿里云镜像加速
1.进入阿里云镜像加速页面: https://cr.console.aliyun.com/#/accelerator 2.修改/etc/docker/daemon.json文件配置,没有则新建: ? ...
- has(expr|ele)保留包含特定后代的元素,去掉那些不含有指定后代的元素。
has(expr|ele) 概述 保留包含特定后代的元素,去掉那些不含有指定后代的元素.大理石平台等级 .has()方法将会从给定的jQuery对象中重新创建一组匹配的对象.提供的选择器会一一测试原先 ...
- 51 Nod 1070 Bash游戏v4(斐波那契博弈)
这题的证明看不太懂,日后再重做... 1070 Bash游戏 V4 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 有一堆石子共有N个.A B两个 ...
- JAVA图形小动画之简单行星运动
//第一个java文件thread_star.java: package solarsystem; import java.awt.Color;import java.awt.Graphics;imp ...
- NOIP模拟9
#rank3,开心 话说这次考试时,心态并不是很好,考试前一天看了DeepinC大佬的博客,上次他rank15就 感觉炸成那样,那我上次rank30算什么?反正内心虚得一比;昨天晚上做梦梦到自己模拟赛 ...
- Love to be loved by you & Just one last dance
http://baike.baidu.com/link?url=wOnBuPncIH5b5oWc0ZREXCU8x6XPYqlZazTLarTjE8eOpdtpv57YMeB_kgXQq4BcCeh2 ...
- Java线程优先级及守护线程(二)
简述 在操作系统中,线程是可以划分优先级的,优先级较高的线程,得到CPU优先执行的几率就较高一些.设置线程的优先级,有助于帮助线程规划期选择下一个哪一个线程优先执行,但是线程优先级高不代表一定会优先执 ...
- Lombok Pojo默认初始值问题
Lombok以注解形式来简化java代码,提高开发效率.比如我们常用的@Builder.@Data.@AllArgsConstructor.@NoArgsConstructor.@ToString等. ...
- docker安装Elasticsearch Kibana和Cerebro
环境:win10家庭版,基于Docker Toolbox 首先先做好以下两步准备工作: ①.打开Oracle VM VirtualBox,设置虚拟机内存大小,默认不够安装,建议如下设置: ②.启动虚拟 ...
- CDN之简介
1. 什么是 CDN? 来自 <什么是 CDN?> CDN(内容交付网络)是一种高度分布式服务器平台,为交付 Web 应用程序.流媒体等内容专门优化.服务器网络分布于众多物理和网络位置,对 ...