詳細(xì)AngularJs4的圖片剪裁組件的實(shí)例
本文介紹了AngularJs4的圖片剪裁組件，下面我來記錄一下,有需要了解AngularJs4的圖片剪裁組件的朋友可參考。希望此文章對(duì)各位有所幫助。
jQuery里有一個(gè)強(qiáng)大的圖片剪裁插件，叫cropper.js。這是大神的GitHub地址：https://github.com/fengyuanchen/cropper
首先想在全是ts文件的angular里運(yùn)用jquery的js代碼插件，這時(shí)候需要一個(gè)東西，他叫橋接文件。npm是一個(gè)強(qiáng)大的庫，已經(jīng)有前人在里面封裝了cropper以及所有你能想到想不到的插件，你需要做的只是安裝上就好了。需要在webstorm的Terminal里敲npm install cropperJs 這樣在node_modules文件夾里就會(huì)出現(xiàn)cropperjs的文件。有一個(gè)@types的文件夾，里面放著你需要用到相對(duì)應(yīng)js插件的ts橋接文件。在Terminal里敲npm install @types/cropperjs
忘了說 在@types下有一個(gè)叫index.d.ts的文件，里面有示例：https://github.com/DefinitelyTyped/DefinitelyTyped，在types下搜cropper，有個(gè)文件cropperjs-tests.ts，就能看到一個(gè)例子，長這樣：
import * as Cropper from 'cropperjs';
var image = <HTMLImageElement>document.getElementById('image');
var cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop: function(e) {
console.log(e.detail.x);
console.log(e.detail.y);
console.log(e.detail.width);
console.log(e.detail.height);
console.log(e.detail.rotate);
console.log(e.detail.scaleX);
console.log(e.detail.scaleY);
}
});
接下來就可以寫代碼啦啦啦啦~~
創(chuàng)建一個(gè)component
import {Component, Input, AfterViewInit, ViewEncapsulation} from '@angular/core';
import * as Cropper from 'cropperjs';
@Component({
selector: 'cropper',
templateUrl: './cropper.component.html',
styleUrls: ['./cropper.component.less'],
encapsulation: ViewEncapsulation.None
})
import * as Cropper from 'cropperjs';這個(gè)是引用cropper的方式。
encapsulation: ViewEncapsulation.None 因?yàn)閍ngular會(huì)封裝自己的樣式，導(dǎo)致自己在less文件里寫的樣式不生效，這句的意義在于，不讓angular生效自己封裝的樣式。
想要實(shí)現(xiàn)點(diǎn)擊一個(gè)按鈕，彈出一個(gè)框讓你選圖片，需要做的是寫一個(gè)change事件，獲取到選中圖片的路徑，然后運(yùn)用cropper里的替換路徑的replace方法，就能完成換圖片顯示了。
<input type="file" accept="image/jpeg" (change)="getImgUrl($event)">
getImgUrl($event) {
this.cropper.replace(window.URL.createObjectURL($event.path[0].files[0])) ;
console.log($event);
}
$event 是整個(gè)事件對(duì)象。
接下來就可以添加自己需要的功能了，比如說向右旋轉(zhuǎn)90度。
<button (click)="rotateRight()">rotate</button>
rotateRight() {
console.log(this.cropper.getData());
this.cropper.rotate(90);
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用詳解
這篇文章主要給大家介紹了如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用@angular/cli V6.0具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考下2018-05-05
Angular5升級(jí)RxJS到5.5.3報(bào)錯(cuò)：EmptyError: no elements in sequence的解
這篇文章主要給大家介紹了關(guān)于Angular5升級(jí)RxJS到5.5.3報(bào)錯(cuò)：EmptyError: no elements in sequence的解決方法，文中介紹了兩個(gè)解決方法，大家可以選擇使用，需要的朋友可以參考借鑒，下面來一起看看吧。2018-04-04
這篇文章主要介紹了Angular用來控制元素的展示與否的原生指令的用法及區(qū)別，非常詳細(xì)，這里推薦給小伙伴們2015-01-01
AngularJS中的$parse服務(wù)與$eval服務(wù)用法實(shí)例
這篇文章主要介紹了AngularJS中的$parse服務(wù)與$eval服務(wù)用法,結(jié)合實(shí)例形式分析了AngularJS中$parse服務(wù)與$eval服務(wù)的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-05-05
Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例
這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)思路及實(shí)現(xiàn)具體的方法，需要的朋友可以參考下2017-07-07
這篇文章主要介紹了AngularJS中的攔截器實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
Angularjs中的頁面訪問權(quán)限怎么設(shè)置
最近一直在忙一個(gè)手機(jī)端的項(xiàng)目，所以對(duì)js學(xué)習(xí)有點(diǎn)松撤了。今天小編抽時(shí)間跟大家分享一篇關(guān)于angularjs中的頁面訪問權(quán)限設(shè)置教處，對(duì)angularjs訪問權(quán)限感興趣的朋友一起學(xué)習(xí)吧2016-11-11
總結(jié)AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤
AngularJS是如今最受歡迎的JS框架之一，簡化開發(fā)過程是它的目標(biāo)之一，這使得它非常適合于元型較小的apps的開發(fā)，但也擴(kuò)展到具有全部特征的客戶端應(yīng)用的開發(fā)。下面給大家總結(jié)了AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤，有需要的可以參考學(xué)習(xí)下。2016-08-08
這篇文章主要介紹了AngularJS ui-router刷新子頁面路由的方法，網(wǎng)上雖然有很多種方法，但是都不適合小編，今天小編給大家分享一個(gè)還不錯(cuò)的方法，需要的朋友可以參考下2018-07-07
關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解
下面小編就為大家?guī)硪黄P(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04