1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Uint8Array Base64 API Demo</ title >
7+ < style >
8+ body { font-family : Arial, sans-serif; margin : 20px ; }
9+ .container { display : flex; gap : 20px ; }
10+ .column { flex : 1 ; }
11+ img { max-width : 100% ; height : auto; border : 1px solid # ccc
12+ textarea { width : 100% ; height : 100px ; padding : 10px ; box-sizing : border-box; }
13+ button { padding : 10px 15px ; background-color : # 007bffcolor : white; border : none; cursor : pointer; }
14+ button : hover { background-color : # 0056b3
15+ </ style >
16+ < script >
17+ // Polyfill/Shim for the Base64 global object using the new Uint8Array methods.
18+ // In fully compliant browsers, you would not need this block.
19+ if ( typeof Base64 === 'undefined' && typeof Uint8Array . prototype . toBase64 === 'function' ) {
20+ window . Base64 = {
21+ toBase64 : ( bytes , options ) => bytes . toBase64 ( options ) ,
22+ fromBase64 : ( b64 , options ) => Uint8Array . fromBase64 ( b64 , options )
23+ } ;
24+ }
25+ </ script >
26+ </ head >
27+ < body >
28+
29+ < h1 > New JavaScript Base64 API Demo (Uint8Array Methods)</ h1 >
30+ < p > This script demonstrates the use of the new Base64 encoding/decoding methods on the **Uint8Array** (simulated here with a `Base64` object wrapper for the exact syntax requested).</ p >
31+
32+ < div class ="container ">
33+ < div class ="column ">
34+ < h2 > Source Image</ h2 >
35+ < img id ="sourceImage " src ="logo4w.png " alt ="Source Image ">
36+ </ div >
37+ < div class ="column ">
38+ < h2 > Output Image from Recovered Data</ h2 >
39+ < img id ="recoveredImage " src ="" alt ="Recovered Image " style ="display: none; ">
40+ < p id ="status "> Click the button to start the conversion...</ p >
41+ </ div >
42+ </ div >
43+
44+ < button onclick ="processImage() "> Start Conversion</ button >
45+
46+ < hr >
47+
48+ < h2 > Base64URL String:</ h2 >
49+ < textarea id ="base64String " readonly > </ textarea >
50+
51+ < script >
52+ // This function uses the exact logic you provided: Base64.toBase64 and Base64.fromBase64
53+ async function processImage ( ) {
54+ const imageUrl = 'logo4w.png' ;
55+ const statusElement = document . getElementById ( 'status' ) ;
56+ const recoveredImageElement = document . getElementById ( 'recoveredImage' ) ;
57+ const base64StringElement = document . getElementById ( 'base64String' ) ;
58+
59+ statusElement . textContent = 'Fetching image...' ;
60+ base64StringElement . value = '' ;
61+ recoveredImageElement . style . display = 'none' ;
62+
63+ // Check if the required API is available
64+ if ( typeof Base64 === 'undefined' ) {
65+ statusElement . textContent = 'Error: The required Base64 API is not available in this browser environment.' ;
66+ return ;
67+ }
68+
69+ try {
70+ // 1. Fetch the image and get the ArrayBuffer (binary data)
71+ const res = await fetch ( imageUrl ) ;
72+ if ( ! res . ok ) throw new Error ( `HTTP error! status: ${ res . status } ) ;
73+
74+ // 2. Convert ArrayBuffer to Uint8Array
75+ const bytes = new Uint8Array ( await res . arrayBuffer ( ) ) ;
76+
77+ statusElement . textContent = 'Encoding bytes to Base64URL...' ;
78+
79+ // 3. ENCODE: Use the new API to get the Base64URL string
80+ // Maps to: bytes.toBase64({ alphabet: 'base64url', omitPadding: true })
81+ const b64 = Base64 . toBase64 ( bytes , { variant : 'base64url' } ) ; // string
82+ base64StringElement . value = b64 ;
83+
84+ statusElement . textContent = 'Base64URL generated. Decoding back...' ;
85+
86+ // 4. DECODE: Use the new API to convert Base64URL string back to Uint8Array
87+ // Maps to: Uint8Array.fromBase64(b64, { alphabet: 'base64url' })
88+ const recovered = Base64 . fromBase64 ( b64 , { variant : 'base64url' } ) ; // Uint8Array, matches original 'bytes'
89+
90+ // 5. Create a Data URL (data:[<mediatype>][;base64],<data>)
91+ // NOTE: The recovered Uint8Array must be converted to a standard Base64 string for the Data URL.
92+ // We use the built-in Uint8Array method to do this, then ensure padding is added back
93+ // if the "variant: 'base64url'" option automatically omits it.
94+ // This step demonstrates the end goal: getting binary data and using it to render the image.
95+
96+ const recoveredBase64Standard = recovered . toBase64 ( ) ;
97+ const dataUrl = `data:image/jpeg;base64,${ recoveredBase64Standard } ;
98+
99+ // 6. Display the image
100+ recoveredImageElement . src = dataUrl ;
101+ recoveredImageElement . style . display = 'block' ;
102+ statusElement . textContent = 'Success! Image recovered from Base64URL and displayed.' ;
103+
104+ } catch ( error ) {
105+ console . error ( 'Error during processing:' , error ) ;
106+ statusElement . textContent = `Error: ${ error . message } ;
107+ }
108+ }
109+ </ script >
110+
111+ </ body >
112+ </ html >
0 commit comments