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 弹出层实现代码
Oct 30 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
js实现input密码框显示/隐藏功能
Sep 10 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
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
php提取微信账单的有效信息
2018/10/01 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
js表单登陆验证示例
2016/10/19 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Python爬取网页信息的示例
2020/09/24 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
八项规定整改措施
2014/02/12 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
Rust中的Struct使用示例详解
2022/08/14 Javascript