Angular使用 ng-img-max 调整浏览器中的图片的示例代码


Posted in Javascript onAugust 17, 2017

你想在Angular应用程序中进行图片上传,是否想在图片上传之前在前端限制上传图片的尺寸?ng2-img-max模块正是你所要的! ng2-img-max模块会使用web sorkers 进行图片大小的计算,并驻留在主线程中。

我们来看看他的用途:

安装

首先,使用npm 或 Yarn安装模块:

$ npm install ng2-img-max blueimp-canvas-to-blob --save

# or Yarn :
$ yarn add ng2-img-max blueimp-canvas-to-blob

blueimp-canvas-to-blob是一个polyfill,以便canvas.toBlob()可以在Safari和旧版本的Internet Explorer等浏览器上使用。

将polyfill脚本包含在项目中。 如果您使用Angular CLI,您可以将脚本添加到.angular-cli.json文件中:

//: .angular-cli.json

...
"scripts": [
 "../node_modules/blueimp-canvas-to-blob/js/canvas-to-blob.min.js"
],
//...

将脚本添加到Angular CLI配置后,您将需要重新启动本地服务。

现在我们将模块导入应用模块或功能模块:

//: app.module.ts

//...
import { Ng2ImgMaxModule } from 'ng2-img-max';

@NgModule({
 declarations: [ AppComponent ],
 imports: [
  //...
  ng2ImgMaxModule
 ],
 providers: [],
 bootstrap: [ AppComponent ]
})
export class AppModule {}

最后,ng2-img-max服务可以导入并注入到这样的组件中:

import { Component } from '@angular/core';

import { Ng2ImgMaxService } from 'ng2-img-max';

@Component({ ... })
export class AppComponent {
 constructor(private ng2ImgMax: Ng2ImgMaxService ) {}
}

使用

我们添加一个File文件输入框到组件的模板中,像这样:

<input type='file' (change)="onImageChange($event)" accept="image/*" />

在组件类中添加方法onImageChange, 它将会限制图片的宽高为:400px,300px:

updateImage: Blob;

constructor(private ng2ImgMax: Ng2ImgMaxService) {}

onImageChange(event){
 let image = event.target.files[0];
 
 this.ng2ImgMax.resizeImage(image,400,300).subscribe(result=> {
  this.uploadImage = result;
 },
 error=> {
  console.log('error:',error);
 })
}

如果您有多个图像需要一次性调整大小,请改用resize方法,并将图片文件数组作为第一个参数传入。

结果是Blob类型,但是如果需要,可以使用File构造函数将其转换为正确的文件:

//: app.component.ts

uploadedImage: File;
constructor(private ng2ImgMax: Ng2ImgMaxService) {}
onImageChange(event){
 let image = event.target.files[0];
 
 this.ng2ImgMax.resizeImage(image,400,300).subscribe(result=> {
  this.uploadedImage = new File([result],result.name);
 },
 error=> {
  console.log('error',error);
 })
}

您现在可以将文件上传到您的后端。 不要忘记在后端做好验证,因为这里的内容会阻止一些用户将超大或非图像文件直接上传到后端。

只限制宽度或高度

假设您只想将高度限制为300px,并相应调整宽度,以保持宽高比相同。 只要设置任何一阀值到10000:

//...
onImageChange(event) {
 let image = event.target.files[0];
 this.ng2ImgMax.resizeImage(image,10000,300).subscribe(result=> {
  this.uploadedImage = new File([result],result.name);
 },
 error=> {
  console.log('error:',error);
 });
}

压缩代替Resizing

您还可以使用compress或compressImage方法执行有损压缩,而不是调整图像大小。 只需传递最大值(兆字节)。 你显然想要运行一些测试,看看你想要走多远的几个小时,同时保持图像看起来很好。

在以下示例中,我们将生成的图像限制为大约75Kb:

onImageChange(event) {
 let image = event.target.files[0];

 this.ng2ImgMax.compressImage(image, 0.075).subscribe(
  result => {
   this.uploadedImage = new File([result], result.name);
   this.getImagePreview(this.uploadedImage);
  },
  error => {
   console.log('? Oh no!', error);
  }
 );
}

图片预览

您可能想要预览要上传到用户的图像。 您可以使用FileReader对象执行此操作。 您还需要使用Angular的DomSanitizer来使其信任使用FileReader对象创建的base64编码数据URI:

现在,我们的组件内容是这样的。组件中有趣的新方法是getImagePreview:

//: app.component.ts

import { Component } from '@angular/core';
import { Ng2ImgMaxService } from 'ng2-img-max';
import { DomSanitizer } from '@angular/platform-browser';

@Component({ ... })
export class AppComponent {
 uploadedImage: File;
 imagePreview: string;

 constructor(
  private ng2ImgMax: Ng2ImgMaxService,
  public sanitizer: DomSanitizer
 ) {}

 onImageChange(event) {
  let image = event.target.files[0];

  this.ng2ImgMax.resizeImage(image, 10000, 375).subscribe(
   result => {
    this.uploadedImage = new File([result], result.name);
    this.getImagePreview(this.uploadedImage);
   },
   error => {
    console.log('? Oh no!', error);
   }
  );
 }

 getImagePreview(file: File) {
  const reader: FileReader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
   this.imagePreview = reader.result;
  };
 }
}

在我们的模板中,我们可以使用sanitizer来显示如图像:

//: app.component.html

<img
  *ngIf="imagePreview"
  [src]="sanitizer.bypassSecurityTrustUrl(imagePreview)">

这就是它的全部! 您还可以查看同一作者的ng2-img-tools包,以获得更多的浏览器端图像处理(如裁剪)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
移动端界面的适配
Jan 11 Javascript
HTML的select控件美化
Mar 27 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
js实现随机点名
Jan 19 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Canvas放置反弹效果随机图形(实例)
Aug 17 #Javascript
js实现方块上下左右移动效果
Aug 17 #Javascript
JavaScript中一些特殊的字符运算
Aug 17 #Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 #Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 #Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 #jQuery
详解JS中的柯里化(currying)
Aug 17 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
零基础php编程好学吗
2019/10/11 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
利用Python破解验证码实例详解
2016/12/08 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python分布式编程实现过程解析
2019/11/08 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
利用python汇总统计多张Excel
2020/09/22 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
大学生两会精神学习心得体会
2014/03/10 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
自信主题班会
2015/08/14 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
检讨书之工作不认真
2019/08/14 职场文书