CuDemVN.Wap.Sh
GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
Share code Get dữ liệu Base64 ảnh cho Xtgem sử dụng JavaScript và Xt:Filelist
 |  RoSino18k  
06-07-2016
|
Base64 là một chương trình mã hoá chuỗi kí tự bằng cách dùng thay thế các kí tự trong bảng mã ASCII 8 bit thành bảng mã 6 bit. Các bạn có thể tham khảo
base64 image - lợi hại
trước khi quyết định sử dụng loại mã hoá ảnh này...
Code mình muốn giới thiệu với các bạn hôm nay là code get base64 data trên Xtgem sử dụng JavaScript. Mã JavaScript kết hợp với chức năng filelist của Xtgem rất hữu dụng khi bạn muốn lấy dữ liệu của ảnh dạng base64. Khi tiếp xúc với Wap/Web ít nhiều bạn đã gặp dạng ảnh này. Base64 image không phải là một đường dẫn cụ thể. Thay vì viết đường dẫn thông thường thì bạn sẽ viết thành:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAABIElEQVR42n2SMU4DMRBFrSBS5RQITrBNTkMK0HZIXGdTpwRFokN0IDqnSZEbpECigQIpitDH/6+9O8YGSyPbs/8/z47tXGWgc8DHMzQ3HTTC2v03sDlFFbJtCjO82dMoYTrJgCi0Zu2tNgP5skTmvu8n1XzxCxSSnu3RKCyEmgIqcTwt0WsAq8kgeDwH3i56w1MUcc1/ZkQIvylPbfCUADYonkrj/AFwoV+fSzfmqfkTYMxuGcyI0XqsFgZiAVif6K6P16vRfLWT8fWrvy2up5cvQyXS8n0ErwCH2a2E/dxgfzNCkjlVkGkTgI9FibYdykwQa04hLV+qBcD7MHdZH1iyyva/mihtAXDZtVXDahJgaGSI97uzISQwkX2Lenp/AAGOFEdkfXUUAAAAAElFTkSuQmCC" />
Tuy nhiên nó chỉ hoạt động trên các trình duyệt có khả năng xử lí nội dung động và các yếu tố canvas.
Hướng dẫn Sử dụng code get data hình ảnh Base64
- Trước tiên bạn tạo thư mục images trên Xtgem ngang root và up các file ảnh vào đó
- Dán code này vào một file HTML bất kì và tiến hành chạy thử
<script>
function getDataUri(url, callback) {
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
canvas.getContext('2d').drawImage(this, 0, 0);
callback(canvas.toDataURL('image/png'));
};
image.src = url;
}
function b64(img){
getDataUri(img, function(dataUri) {
document.getElementById('output').innerHTML=dataUri;
})};
</script>
<div class="xt_container">
<xt:filelist folder="/images" template="<img src=".file_url." alt="*" onclick="b64(this.src)" /><br />" per_page="10"/>
<textarea id="output" style="display:block;margin:0 auto; width:98%;height:20em"></textarea>
</div>
+ File ảnh sẽ được chuyển về dạng mã base64 khi bạn click vào ảnh do filelist tạo ra. Và dữ liệu sẽ được hiển thị vào textarea bên dưới. Bạn có thể sử dụng đoạn mã Base64 nhận được cho thuộc tính src của tag img để hiển thị hình ảnh base64
+ Dữ liệu base64 sẽ chiếm không gian lớn hơn khoảng 33% so với bức ảnh sử dụng URL thông thường nhưng nó lại có thể nhúng trực tiếp vào code hoặc CSS của bạn
+ Những hình ảnh animation sẽ bị chuyển thành dạng ảnh tĩnh
Quan trọng Script này chỉ đưa ra dữ liệu base64 tốt đối với hình ảnh kích thước nhỏ. Những hình ảnh lớn có thể sẽ không thể hiển thị trên một vài trình duyệt trong vài giây hoặc có thể xảy ra tình trạng tràn bộ nhớ. Hình ảnh hiển thị này là do phía trình duyệt, không thuộc về server Xtgem
Nguồn: Graham - Forum.Xtgem.Com
Lượt xem: 2113 
Đánh giá: 4.5/ 5, 2113 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!