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 相关文章推荐
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
简单的js表单验证函数
Oct 28 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JS 创建对象的模式实例小结
Apr 28 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
smarty实例教程
2006/11/19 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
javascript基本类型详解
2014/11/28 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
python executemany的使用及注意事项
2017/03/13 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
python中下标和切片的使用方法解析
2019/08/27 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
python制作抽奖程序代码详解
2021/01/15 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
四种会话跟踪技术
2015/05/20 面试题
交通事故委托书范本(2篇)
2014/09/21 职场文书
文明礼仪主题班会
2015/08/13 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Java基于字符界面的简易收银台
2021/06/26 Java/Android
go goth封装第三方认证库示例详解
2022/08/14 Golang