Base64 và Cache Image trong LocalStorage

15:00 ngày 04-11-2017

Base64 là một chuẩn mã hóa sử dụng các chuỗi ký tự với một bảng mã gồm 6 bit. Base64 thường được sử dụng để mã hóa các tập tin đa phương tiện âm thanh, hình ảnh và video

Trong Base64, 64 ký tự đại diện cho các giá trị từ 0-63 được hình thành từ tổ hợp 6 bit. Các ký tự bao gồm A-Z (tương ứng chỉ số từ 0-25 trong Base64), a-z (tương ứng chỉ số từ 26-51 trong Base64), 0-9 (tương ứng chỉ số từ 52-61 trong Base64) và 2 ký tự +, / (tương ứng chỉ số 62 và 63 trong Base64). Chuỗi mã hóa có thể được kết thúc bằng ký tự =. 

Vì Base64 chỉ sử dụng 6 bit, trong khi 1 byte có 8 bit và bội số chung nhỏ nhất của 6 và 8 là 24. Nên chuỗi được mã hóa sẽ cần được nhóm thành những nhóm gồm 3 bytes. Mỗi nhóm sau khi mã hóa sẽ sinh ra 4 ký tự thuộc Base64. Nếu nhóm cuối cùng của chuỗi được mã hóa không đủ 3 bytes. Chúng cần được thêm 1 hoặc 2 bytes để đủ 3 bytes. Theo quy ước, chuỗi Base64 sẽ phải thêm số lượng ký tự = ứng với số byte được thêm vào chuỗi mã hóa.

Dưới đây là một ví dụ trên wiki về mã hóa Base64.

 

Text content M    
ASCII 77 (0x4d) 0 (0x00) 0 (0x00)
Bit pattern 0 1 0 0 1 1 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Index 19 16 0 0
Base64-encoded T Q = =

Ở trên chúng ta sẽ mã hóa chuỗi gồm ký tự M. Vì một nhóm mã hóa cần 3 bytes. 2 bytes 0 được thêm vào. M có mã 77 có dãy bit là 01001101. Sau khi thêm 2 bytes, cấu trúc bit là 010011010000000000000000. Cấu trúc bit này ứng với 4 tổ hợp 6 bit. 010011 ( 19 - T trong Base64) 010000 (16 - Q trong Base64) 000000 ( = theo quy ước thêm byte) 000000 ( = theo quy ước thêm byte). Vậy chuỗi mã hóa của M trong Base64 là TQ==

 

Text content M a  
ASCII 77 (0x4d) 97 (0x61) 0 (0x00)
Bit pattern 0 1 0 0 1 1 0 1 0 1 1 0 0 0 0 1 0 0 0 0 0 0 0 0
Index 19 22 4 0
Base64-encoded T W E =

Ở đây chúng ta sẽ mã hóa chuỗi gồm ký tự Ma. Vì một nhóm mã hóa cần 3 bytes. 1 bytes 0 được thêm vào. M có mã 77, có dãy bit là 01001101, a có mã 97 có dãy bit 01100001. Sau khi thêm 1 byte, cấu trúc bit là 010011010110000100000000. Cấu trúc bit này ứng với 4 tổ hợp 6 bit. 010011 ( 19 - T trong Base64), 010110 (22 - W trong Base64), 000100 (4 - E trong Base64), 000000  ( = theo quy ước thêm byte). Vậy chuỗi mã hóa của Ma trong Base64 là TWE=

 

Text content M a n
ASCII 77 (0x4d) 97 (0x61) 110 (0x6e)
Bit pattern 0 1 0 0 1 1 0 1 0 1 1 0 0 0 0 1 0 1 1 0 1 1 1 0
Index 19 22 5 46
Base64-encoded T W F u

Ở ví dụ này, chuổi mã hóa là Man, đủ tổ hợp 3 bytes cho một nhóm, vì vậy không cần thêm bất cứ byte nào. Và chuỗi Base64 tương ứng là TWFu

Vì một ký tự trong mã ASCII có 8 bit, nên khi mã hóa các chuỗi ASCII sang Base64 (6 bit). Độ dài chuỗi Base64 sẽ tăng 33%

 

Cache Image vào trong LocalStorage

Chúng ta có thể sử dụng dạng mã hóa Base64 của các hình ảnh để lưu trữ local như một hình thứ cache. Ví dụ bên dưới sẽ lấy hình ảnh từ localStorage và hiển thì lên UI. Nếu localStorage chưa có giá trị, thì nó sẽ được load và lưu lại.

<!DOCTYPE html>
<html>
 <script>

window.onload = function(e) {
	if (window.localStorage) {
			// Get Image data from localStorage
			var imageData = window.localStorage['imageData'];
			if (imageData){
				//Load to image view if exists
				document.getElementById('imageView').src= imageData;
			}
			else{
				//Create Image Object
				var img = new Image();
				// Allow CrossOrigin
				img.setAttribute('crossOrigin', 'anonymous');
				//Save Image Data after it is loaded
				img.addEventListener('load',function() {
					
					try {
						//Create canvas
						var canvas = document.createElement('canvas'),
						context = canvas.getContext("2d");	
						canvas.width = img.width;
						canvas.height = img.height;
						//Draw image to canvas
						context.drawImage(img, 0, 0);
						//Get Image Data from canvas
						imageData = canvas.toDataURL("image/png");
						// Save Image Data to LocalStorage
						window.localStorage.setItem("imageData", imageData);
						//Load to Image Data to image view 
						document.getElementById('imageView').src = imageData;
					}
					catch (ex) {
						console.log("Storage Image Error: " + ex);
					}
				});
				//Load Image from Url
				img.src = "http://pages.hunght.com/home/GenerateImage/?text=Base64";
			}
			
		}
}
</script>
<body> 
<h1>Cached Image in LocalStorage</h1>
<img src="" id="imageView" style="border: 1px; border-style: solid;"/>

</body>
</html>

Sau khi chạy trên trình duyệt, hãy kiểm tra khóa imageData trong localStorage của trình duyệt. Chúng ta sẽ thấy chuỗi như bên dưới. Trong đó data:image/png;base64 ngụ ý rằng đây là một hình ảnh được mã hóa bằng Base64. Dữ liệu mã hóa là phần sau dấu,

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAACI7Fo9AAAIc0lEQVR4nO3d23HjxhqFUYXHgBiOclEqyoTnYWqO4TGBvuBvkJq9VhXfbA4J9odrA/p4AH+9j1d/AGA9oUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAoUMAofMDfT3uHx+Pj4PX7fP7JZ/s+/O285nuj6+XfKJfrg/96374A0297l+Xfw2u93WfGR+3x2XNf38+brufQ+jFr9cuUBaoGDO3z8fq3o9XREJf87rgh2W9/V3hNxsTzXEt9IWvC3fbKFca+dLY2+cMhH7ByyH8D3R4vHsQbcf4qj5R13fuQOintsB9a33H7T/L9+PzdibW1ha2cDx0b7iEXrKr3QzeZv3HaP2WXVvkxh5BzXDo2WUXemnov976aEE7Xv8ZGlvzgWPsw/FQUPrY5T6h18V4yVqcpRq7wkO/4dF7nT0pN3yuSeiFW93jrcGrZkvR73ArORrn4Yr/zFh7tst+e9zvR4ccQr8sdMfp7+74mPddVtRPV0b3r8a5BaH/nNC7d9dWnA9on4lePqB6vv+ZZbx0bBR5upfwa5kLfeun7bqfvu5/7judmzRSMLh6rmcXLe/D7/oWMx2fj6/f31PoW0tDP971G9rYnBjgJQO18t+f2sr27kHUrehWnyU/63nI/wQs9K2VoR++98CCXjZ7r/MzVK9kRlc0C/799tb9zU+k7iyT7fpH6FvLQi86Pl8R2dDnGJmEUR3bK//9sb2x1iFN7Q7Aztj6Y+Up9K1FodfcIti3u3o0YNvH1MffsT0JY++7VNxYceL7d64gdwPsuhQ2cThRcGy/95uOrXyEfir0ntlJ3Wv31mDtHjSN6PY+UOPf79kin9nSNZdlx/dvr+h2Bnwr9K9ze1rTu/57n+vJghT61hvfplr5Q02dQS45xzB5CFO2kpucq97YANwqTgwO78/vLcvn40roW2/74Inia/AT0VZdXpo5e117n0BrF/vJ979oXIxs2fd+j733EPrWhVv0sTYLL809HlPTLy8ZKN/fT1YYk4caR0bnrI+Oi6crvr4TiV1fZ/f32/8dhL6V8uCJmXnWjWWz7BLTkhOkgyuP3nGx8jzBvz7O+G8g9K0XhL40kj0zd9J1nbmuHzCrBujQDSrFT4Y5dU/73mdprGSEvrVg69E7TbQu9vPXmp/vZYy/b8XeyqoZaUMDv3xvZvYpM/v/X2tRCH3rhfejT7//gkk0+ye/z8xtn/l+VVNdT37WqlmNA8vy2W+wu9LrWOEJfWv1HUqtKAe2UEueQtoI/fo55utmwr069OF5CbufoW9ZCn3rglsRT18qWj0N9jD0nu8w9jr3IMWLQl/yV05GTgge/LedGwehb11xz/GZ472LThb2jZ3K3eq9Zfuq0P9YBkueBtP//Ln9FWt/oELfuiL02d33oS1544crfn5dzWHEs+X7JqFXz2P4/a49Z/4v2IPbe111NejvDH1qAkjf1rNq3vyps+Vn9jr+c4noXR6/teY2VaH/IvTfmj/24K7XhU+kHd3a//vffpfQV1zm6/xuQl/gTXfdj2OZ+FwvevR0T/R/Dq7SJ6+eUf54ZqH/9neGPnEyrnywv/QZ85XTT9/l74vXr2z/Pw6EvsAFg2p8osSC3dfR0IsH+dBucMF98E8WwMQyLT5Ov3gF5qz71vKFPzP18Q1CLz7rPHa8O3FbafsTTD2jvTKWqw9JhL61OPTWRJO9AVY7KNpn8Ef3Ksa2ZhPvVT3XfPp3LrpldsleSuufFPo/XvVwyMbCrjsZN3+Zrua5d4/J8wMzK6fJZXDqLrCez7FiD6VN6FvlofdP+DgcIBWPUho4qfP0s7Suj3ftWTSWx9F7lNwqWrHCaP2mR+Pk7N9Wnyf0rbe9H/3EhJmJs7azW9Wj79Jzae3crZbHoXXNz+/dLZj58089v8PCy4VC33pB6N1r8Asvs8w99vjkqzOyyhtqzgz2+rsH18Ym9K1LQ59YuEWf73a/z19HX7GMBk/b18e+5p7yd4m8/VmFvuC18k87dUT++X1+wkzhln36mLTqt7rsr9juvC6a3Sf0rVWhl081m7lFdLOCqZoZV3oDy+SSmN2qlgY2d8vulQ8GFfpP14rtqtHUFf3aKavzfzKqUOEfm0ghdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAggdAjwP8MNloqtIwmqAAAAAElFTkSuQmCC

 

Bài Viết Cùng Chuyên Mục

PerformanceNavigation và cách thức truy cập Website (Page)

PerformanceNavigation và cách thức truy cập Website (Page)

Trong quá trình xây dựng Website, đôi khi chúng ta cần xác định cách mà một Page được truy cập: Mở từ thanh địa chỉ của trình duyệt, từ history hay Page được Reload,...

HTML5 Web Workers là gì

HTML5 Web Workers là gì

Một Web Worker là một chương trình JavaScript chạy trong background. Vì vậy, Web Worker sẽ không làm treo web khi chạy, nó sẽ không tác động đến hiệu suất của Website

Lưu trữ cục bộ trong HTML5: Local Storage và Session Storage

Lưu trữ cục bộ trong HTML5: Local Storage và Session Storage

Ngoài Cookies, HTML5 cung cấp phương thức lưu trữ mới bên phía giao diện người dùng gọi là HTML Local Storage. Chúng được bảo mật và lưu trữ được dữ liệu lớn hơn (it nhất là 5MB)

Angular Tree

Angular Tree

Angular Tree là một AngularJS UI component. Angular Tree có thể sort nested lists, hổ trợ drag & drop và không phụ thuộc vào JQuery

Phản Hồi

Viết Phản Hồi

Reload

Chuyên Mục

Bài Viết Mới

Phản Hồi Mới