[Angular] มาลอง Resizing cropping images ด้วย Alyle UI กันเถอะ [Part 2]

จากบทความก่อนหน้านี้ [Angular] มาลอง Resizing cropping images ด้วย Alyle UI กันเถอะ [Part 1 ] เพื่อนๆก็คงได้ลง Alyle UI กันหมดแล้ว เดี๋ยวเรามา Resizing cropping images กันต่อเลยใน Part นี้
- ไปที่ app.component.ts แล้ว Import และเขียนโค้ดตามด้านล่างได้เลยย
2. หลังจากนั้นก็เติมโค้ดเข้าไปในหน้า app.component.html ดังข้างล่าง
3. นอกจากนี้อย่าลืมไป Import HttpClientModule ใน AppModule กันด้วยนะครับ ไม่เช่นนั้นมันจะใช้งานไม่ได้ครับ ( อันนี้ในเว็บ Alyles UI ไม่ได้บอก ผมลองแก้ไปเรื่อยๆ เลยเห็นว่ามันต้อง Import ด้วย ฮ่าๆๆ )
import { HttpClientModule } from '@angular/common/http';แล้วอย่าลืม เอามาใส่ใน imports:[] ด้วยนะครับ
imports: [
.
.
.HttpClientModule,
.
.
.],
ปล. ถ้าใครก๊อปโค้ดมาจาก Part 1 มันน่าจะ import ไว้อยู่แล้วครับ
หลังจากทำเสร็จแล้วเราก็มาลองรันกันเลยยยย…

เราสามารถ Drag and drop file มาใส่ได้เลยครับ

และเมื่อเรากดปุ่บ Crop ปุ่ม Upload จะเด้งขึ้นมา เราก็สามารถกด Upload ได้

ไฟล์ที่ได้จะเป็น dataURI นะครับ ถ้าจะอัพโหลดไฟล์ไปก็ต้องขึ้นอยู่กับ Backend อีกทีครับว่าจะให้อัพไฟล์ประเภทไหน ทางเราก็ต้องทำการแปลงก่อนที่จะ Push อีกทีครับ
ก็จบไปแล้วครับกับการทำ Resizing cropping images ง่ายๆ ด้วย Alyle UI ตอนแรกอาจจะติดตั้งยุ่งยากหน่อย แต่หลังจากติดตั้งเรียบร้อยแล้ว อะไรอะไรก็จะง่ายขึ้นเยอะเลยครับ
