Konverter Gambar menyang Base64 nggunakake SAP UI5

Pambuka - kirim iki minangka bagéan saka Program Integrasi UI5 seri.

Nalika kita kudu ngowahi Gambar menyang Base64

Sampeyan bisa uga pengin ngowahi gambar menyang format Base64 amarga macem-macem alasan, sawetara kasus panggunaan umum yaiku:

  1. Nyimpen gambar ing database: Tinimbang nyimpen gambar minangka file fisik, ngowahi dadi Base64 lan nyimpen senar ing database bisa nyederhanakake manajemen database.
  2. Ngirim gambar ing API: Nalika ngirim gambar ing API utawa protokol jaringan liyane, iku asring perlu kanggo encode minangka data basis teks kayata Base64, supaya padha bisa ditularaké ing format teks biasa.
  3. Nambahake gambar ing HTML, CSS, utawa JavaScript: Sampeyan bisa masang gambar sing dikodekan Base64 langsung ing kode HTML, CSS, utawa JavaScript, ngurangi jumlah panjalukan HTTP sing dibutuhake kanggo mbukak kaca.
  4. Ngurangi ukuran file gambar: Encoding Base64 nambah ukuran file gambar, nanging bisa dadi optimalisasi migunani nalika sawetara gambar ditempelake ing siji document, amarga nyuda jumlah file sing kudu dimuat.

Wigati dicathet yen enkoding Base64 nambah ukuran file gambar kanthi kira-kira 33%, dadi dudu cara sing paling efisien kanggo nyimpen gambar gedhe. Nanging, kanggo gambar lan lambang sing luwih cilik, overhead biasane ora dadi masalah.

Langkah-langkah kanggo ngowahi Gambar dadi Base64 nggunakake JavaScript

Mangkene langkah-langkah kanggo ngowahi gambar dadi Base64 nggunakake JavaScript:

1. Maca file gambar minangka senar binar nggunakake FileReader API:

const reader = new FileReader(); reader.readAsDataURL(file);
2. Sawise file wis diwaca, ing load acara bakal micu, lan asil bakal kasedhiya ing reader.result properti. Asil iki bakal dadi URL data sing makili gambar ing format Base64:
reader.addEventListener("load", function() {const base64 = reader.result;});

3. Sampeyan bisa nggunakake base64 variabel ing kode JavaScript sampeyan kanggo ngakses data gambar. Contone, sampeyan bisa nggawe HTML img unsur lan nyetel sawijining src atribut menyang data gambar sing dienkode Base64:

gambar const = new Gambar(); image.src = base64;

Iki conto lengkap sing maca file gambar lan nampilake ing kaca:

const input = document.querySelector("input[type='file']"); const imageContainer = document.querySelector("#gambar-wadah"); input.addEventListener("ganti", fungsi(acara) {const file = event.target.files[0];const reader = new FileReader(); reader.readAsDataURL(file);read.addEventListener("load", function( ) {const base64 = reader.result;const image = new Image();image.src = base64;imageContainer.appendChild(gambar);});});

 

Langkah-langkah kanggo ngowahi Gambar dadi Base64 nggunakake SAP UI5

Ing SAP UI5, sampeyan bisa nggunakake FileReader () fungsi kanggo ngowahi padha. Kode kasebut ing ngisor iki:

Ndeleng.xml

</HBox> </VBox> </content> </Page> </pages> </App> </Shell> </mvc:View>

 

Controller.js

sap.ui.define(["sap/ui/inti/mvc/Controller"], fungsi (Controller) {"nggunakake ketat";return Controller.extend("Test.Test.controller.Main", { onChangeDP: function ( oEvent) {// Entuk File var that = this; var image = new Image(); var file = oEvent.getParameter("files")[0];var reader = new FileReader();read.readAsDataURL(file); reader.onload = fungsi () {var data = reader.result;//Setel string Base64 bali saka FileReader minangka nilai area teks. that.byId("idBase64Area").setValue(data); image.onload = fungsi () {// Priksa manawa gambar ala / ora valid yen (this.width + this.height === 0) { that.dpImage = ""; sap.m.MessageBox.error ("Gambar Ora Sah!");}}; };read.onerror = function (error) {//Error Handling};}});});

output

Konverter Gambar menyang Base64 nggunakake UI5

 

Pengarang


komentar

Ninggalake a Reply

Panjenengan alamat email ora bisa diterbitake. Perangkat kothak ditandhani *

Situs iki nggunakake Akismet kanggo ngurangi spam. Sinau babagan proses data sampeyan.