เวลาเราทำ web app เราคงสามารถหา dataURI ได้ไม่ยาก แต่ถ้าเป็น mobile app ล่ะ โดยบทความนี้เราจะแนะนำ library นึงที่ใช้หา dataURI ได้ไม่ยากเลย
เรามาเริ่มใช้งานเลยโดยผมจะเขียนแอปมาให้คร่าวๆ
![DataURI ด้วย React-native view -1](http://www.frevation.com/wp-content/uploads/2022/08/DataURI-ด้วย-React-native-view-1.png)
โดยสมมุติว่า รูปตรา sample เป็นสิ่งที่เราอยากหา DataURI ส่วน ปุ่ม press me เป็นปุ่มที่ console log DataURI ให้เรา
![DataURI ด้วย React-native view -2](http://www.frevation.com/wp-content/uploads/2022/08/DataURI-ด้วย-React-native-view-2.png)
สร้าง Ref ขึ้น โดยตั้ง ref ให้กับ View component ที่เราต้องการ DataURI
![DataURI ด้วย React-native view -3](http://www.frevation.com/wp-content/uploads/2022/08/DataURI-ด้วย-React-native-view-3.png)
ฟังชัน capture เป็นส่วนที่ทำให้เรารู้ dataURI ภายในฟังชันเราสามารถใส่ option เพิ่มเติมได้ เช่น
width : ความกว้าง
height : ความสูง
format: png, jpg, webm
quality: 0.0 – 1.0
result: tmpfile, base64, data-uri
![DataURI ด้วย React-native view -4](http://www.frevation.com/wp-content/uploads/2022/08/DataURI-ด้วย-React-native-view-4.png)
กดปุ่มเลย เราจะได้ dataURIแล้ว
![DataURI ด้วย React-native view -5](http://www.frevation.com/wp-content/uploads/2022/08/DataURI-ด้วย-React-native-view-5.png)
เราสามารถปรับแต่ง View ของเราได้ด้วย เช่น ถ้ามีพื้นหลังสีแดง ก็จะ capture พื้นหลังไปด้วย
![DataURI ด้วย React-native view -6](http://www.frevation.com/wp-content/uploads/2022/08/DataURI-ด้วย-React-native-view-6.png)
![DataURI ด้วย React-native view -7](http://www.frevation.com/wp-content/uploads/2022/08/DataURI-ด้วย-React-native-view-7.png)
นี่คือ library ที่ช่วยให้เราทำงานบน mobile app ได้ง่ายขึ้น ทุกท่านสามารถนำไปใช้ได้เลย
ผู้เขียน Tanapat Limtemsap
วันที่ 26 สิงหาคม พ.ศ. 2565