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 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
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
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
javascript 实现map集合
2015/04/03 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
python实现DES加密解密方法实例详解
2015/06/30 Python
python线程、进程和协程详解
2016/07/19 Python
Python实现八大排序算法
2016/08/13 Python
Python入门_条件控制(详解)
2017/05/16 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python编程线性回归代码示例
2017/12/07 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
python实现画一颗树和一片森林
2018/06/25 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
Python如何访问字符串中的值
2020/02/09 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
学校消防安全制度
2014/01/30 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
赤壁观后感(2)
2015/06/15 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
python实现简单的聊天小程序
2021/07/07 Python
Java数据结构之堆(优先队列)
2022/05/20 Java/Android