Chính xác những gì bạn cần :] Bạn có thể chọn phiên bản gọi lại hoặc phiên bản hứa hẹn. Lưu ý rằng những lời hứa sẽ chỉ hoạt động trong IE với Promise polyfill lib. Bạn có thể đặt mã này một lần trên một trang và chức năng này sẽ xuất hiện trong tất cả các tệp của bạn.
Sự kiện Loadend được bắn khi tiến trình đã dừng việc tải tài nguyên [ví dụ: sau "lỗi", "hủy bỏ" hoặc "tải" đã được gửi đi]
Phiên bản gọi lại
File.prototype.convertToBase64 = function[callback]{
var reader = new FileReader[];
reader.onloadend = function [e] {
callback[e.target.result, e.target.error];
};
reader.readAsDataURL[this];
};
$["#asd"].on['change',function[]{
var selectedFile = this.files[0];
selectedFile.convertToBase64[function[base64]{
alert[base64];
}]
}];
Phiên bản hứa
File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
HTML
Trong hướng dẫn ngắn này, chúng tôi khám phá 3 phương thức JavaScript khác nhau để chuyển đổi hình ảnh thành chuỗi base64. Chúng tôi xem xét chuyển đổi một đối tượng tệp hoặc blob, phần tử canvas và thẻ hình ảnh.
Trong tất cả các ví dụ dưới đây, chúng tôi giả sử chúng tôi đã có sẵn đối tượng ,
,
File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
0 hoặc File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
1.Chúng tôi sẽ chuyển đổi hình ảnh thành DataURL, chúng tôi có thể sử dụng chức năng bên dưới để chuyển đổi DataURL thành chuỗi Base64.
const getBase64StringFromDataURL = [dataURL] =>
dataURL.replace['data:', ''].replace[/^.+,/, ''];
Bắt đầu nào.
Hình ảnh là một đối tượng tệp hoặc blob
Khi hình ảnh là đối tượng
File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
0 hoặc File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
1, chúng ta có thể sử dụng API File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
4, vui lòng xem bài viết này về việc chuyển đổi tệp sang chuỗi cơ sở64 hoặc dataURL.Chúng tôi cũng sẽ sử dụng API Filereader khi chuyển đổi thẻ hình ảnh thành chuỗi base64.
Hình ảnh là một phần tử canvas
Nếu chúng ta có mà chúng ta muốn biến thành chuỗi base64, chúng ta có thể sử dụng
File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
6 trên phần tử Canvas.
const canvas = document.getElementById['my-canvas'];
// Convert canvas to dataURL and log to console
const dataURL = canvas.toDataURL[];
console.log[dataURL];
// Logs data:image/png;base64,wL2dvYWwgbW9yZ...
// Convert to Base64 string
const base64 = getBase64StringFromDataURL[dataURL];
console.log[base64];
// Logs wL2dvYWwgbW9yZ...
Theo mặc định, Canvas xuất ra PNG không mất, chúng ta có thể chuyển
File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
7, File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
8 hoặc File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
9 cho phương thức File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
6 để có được một định dạng khác.Khi sử dụng
File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
8 hoặc File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
9, chúng ta có thể vượt qua nén hình ảnh làm đối số cuối cùng,
3 có nghĩa là rất nhiều nén,
4 có nghĩa là không nén.
const canvas = document.getElementById['my-canvas'];
// Convert canvas to dataURL and log to console
const dataURL = canvas.toDataURL['image/jpeg', 0.5];
console.log[dataURL];
// Logs data:image/jpeg;base64,wL2dvYWwgbW9yZ...
// Convert to Base64 string
const base64 = getBase64StringFromDataURL[dataURL];
console.log[base64];
// Logs wL2dvYWwgbW9yZ...
Hình ảnh là một phần tử IMG
Nếu hình ảnh của chúng tôi là một phần tử , chúng tôi có thể
6 hình ảnh SRC và chuyển đổi nó thành chuỗi base64.Ngoài ra, chúng ta có thể vẽ hình ảnh thành một khung vẽ và sau đó chuyển đổi khung vẽ thành một phần tử hình ảnh, điều này sẽ hữu ích nếu chúng ta đang tìm kiếm một định dạng hình ảnh cụ thể.
Nếu hình ảnh được đặt trên máy chủ từ xa, cấu hình CORS của máy chủ từ xa phải cho phép tập lệnh cục bộ của chúng tôi truy cập hình ảnh.
Tìm nạp nguồn hình ảnh
Lưu ý rằng loại MIME được trả về bởi máy chủ từ xa trong tiêu đề phản hồi
7 được phản ánh trong dataURL.Nếu loại MIME không chính xác, DataURL cũng sẽ không chính xác.
const image = document.getElementById['my-image'];
// Get the remote image as a Blob with the fetch API
fetch[image.src]
.then[[res] => res.blob[]]
.then[[blob] => {
// Read the Blob as DataURL using the FileReader API
const reader = new FileReader[];
reader.onloadend = [] => {
console.log[reader.result];
// Logs data:image/jpeg;base64,wL2dvYWwgbW9yZ...
// Convert to Base64 string
const base64 = getBase64StringFromDataURL[reader.result];
console.log[base64];
// Logs wL2dvYWwgbW9yZ...
};
reader.readAsDataURL[blob];
}];
Vẽ hình ảnh vào một tấm bạt
Vẽ hình ảnh thành một khung vẽ trước tiên cho phép chúng tôi chuyển đổi nó sang một định dạng khác.
Xin lưu ý rằng phương pháp này chậm hơn chỉ đơn giản là tìm nạp hình ảnh
8 như trong ví dụ trước.Một cảnh báo bổ sung là phần tử Canvas có kích thước tối đa, đối với một số trình duyệt, giới hạn kích thước này là vấn đề gây ra rất thấp khi chuyển đổi hình ảnh.
const image = document.getElementById['my-image'];
const toDataURL = [] => {
const canvas = document.createElement['canvas'];
// We use naturalWidth and naturalHeight to get the real image size vs the size at which the image is shown on the page
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
// We get the 2d drawing context and draw the image in the top left
canvas.getContext['2d'].drawImage[image, 0, 0];
// Convert canvas to DataURL and log to console
const dataURL = canvas.toDataURL[];
console.log[dataURL];
// logs data:image/png;base64,wL2dvYWwgbW9yZ...
// Convert to Base64 string
const base64 = getBase64StringFromDataURL[dataURL];
console.log[base64];
// Logs wL2dvYWwgbW9yZ...
};
// If the image has already loaded, let's go!
if [image.complete] toDataURL[image];
// Wait for the image to load before converting
else image.onload = toDataURL;
Gói lên
Chúng tôi đã chuyển đổi một ____10,
File.prototype.convertToBase64 = function[]{
return new Promise[function[resolve, reject] {
var reader = new FileReader[];
reader.onloadend = function [e] {
resolve[{
fileName: this.name,
result: e.target.result,
error: e.target.error
}];
};
reader.readAsDataURL[this];
}.bind[this]];
};
FileList.prototype.convertAllToBase64 = function[regexp]{
// empty regexp if not set
regexp = regexp || /.*/;
//making array from FileList
var filesArray = Array.prototype.slice.call[this];
var base64PromisesArray = filesArray.
filter[function[file]{
return [regexp].test[file.name]
}].map[function[file]{
return file.convertToBase64[];
}];
return Promise.all[base64PromisesArray];
};
$["#asd"].on['change',function[]{
//for one file
var selectedFile = this.files[0];
selectedFile.convertToBase64[].
then[function[obj]{
alert[obj.result];
}];
}];
//for all files that have file extention png, jpeg, jpg, gif
this.files.convertAllToBase64[/\.[png|jpeg|jpg|gif]$/i].then[function[objArray]{
objArray.forEach[function[obj, i]{
console.log["result[" + obj.fileName + "][" + i + "] = " + obj.result];
}];
}];
}]
1,
và
thành dataURL và chúng tôi đã xem xét cách chuyển đổi dataURL thành chuỗi base64. Bằng cách xem xét các phương pháp khác nhau để chuyển đổi hình ảnh thành chuỗi Base64, giờ đây chúng ta biết những ưu và nhược điểm của từng phương pháp.