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ữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Share code Get dữ liệu Base64 ảnh cho Xtgem sử dụng JavaScript và Xt:Filelist

Admin* 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="&lt;img src=&quot;.file_url.&quot; alt=&quot;*&quot; onclick=&quot;b64(this.src)&quot; /&gt;&lt;br /&gt;" 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: 485
score
Đánh giá: 4.5/ 5, 485 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-485]

Old school Swatch Watches