Cách lấy dữ liệu được mã hóa base64 từ hình ảnh html

Question

Tôi có biểu mẫu đăng ký nơi người dùng có thể chọn hình đại diện. Họ có 2 khả năng:

1. Chọn một avatar mặc định
2. Tải lên avatar của mình

Trong trang HTML của tôi, tôi có điều này.

<img id="preview" src="img/default_1.png"> 

Nó sẽ hiển thị hình đại diện đã chọn. Tôi sử dụng Tệp Api để cho phép người dùng tải lên hình ảnh của riêng họ. Điều đó làm cho src của hình ảnh HTML thành một cái gì đó như thế này.

<img id="preview" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... /> 

Khi họ đăng biểu mẫu đăng ký. Dữ liệu sẽ được gửi đến một dịch vụ REST. Tôi có thể gửi dữ liệu mã hóa base64 khi người dùng tải lên hình đại diện. Nhưng làm cách nào để xử lý hình đại diện mặc định? Đó là một url thay vì dữ liệu được mã hóa base64.

Answer 1

Bạn có thể thử sau mẫu http://jsfiddle.net/xKJB8/3/

<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG"> 
<canvas id="myCanvas" /> 

---

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var img = document.getElementById("preview"); 
ctx.drawImage(img, 10, 10); 
alert(c.toDataURL()); 

Answer 2

Bạn cũng có thể sử dụng lớp FileReader:

var reader = new FileReader(); 
    reader.onload = function (e) { 
     var data = this.result; 
    } 
    reader.readAsDataURL(file);