Chuyển đổi url sang javascript base64

Trong trường hợp bạn chưa biết, URL dữ liệu chỉ đơn giản là một chuỗi ký tự dài đại diện cho mã nhị phân của hình ảnh của bạn. Sau đó, bạn có thể sử dụng URL này trong các thẻ HTML

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

4 của mình

Rât thuận tiện

Video hướng dẫn

Nếu bạn thích video hướng dẫn hơn, bạn có thể xem video dài 4 phút này trên kênh YouTube của tôi

Bước 1. Nhập tệp

Bạn sẽ cần một trường nhập tệp trong HTML của mình. Chỉ như thế này

 type="file" id="fileInput" />

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn có thể đặt tên cho ID bất cứ điều gì bạn thích

Bước 2. Thay đổi sự kiện

Trong JavaScript, bạn sẽ cần đính kèm trình nghe

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

5 để phản ứng khi người dùng chọn một tệp

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu bạn chọn một tệp và kiểm tra bảng điều khiển, bạn sẽ thấy đối tượng sự kiện. Lưu ý về tài sản

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

6

Bước 3. Thiết lập trình đọc tệp

Tiếp theo, bạn sẽ cần lấy một tham chiếu đến tệp đã chọn và tạo một phiên bản mới của

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

7. Đối tượng đọc tệp này có thể đọc tệp ở các dạng khác nhau

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thay thế dòng

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

8 bằng mã trên

Bước 4. Đọc dưới dạng URL dữ liệu

Bây giờ chúng ta đã tạo

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

7, chúng ta có thể yêu cầu nó đọc tệp dưới dạng URL dữ liệu Base64

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Như bạn có thể thấy, chúng tôi đính kèm sự kiện

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

1 với sự kiện

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

7. Khi tệp đã được đọc xong, chúng tôi có thể lấy URL dữ liệu bằng cách truy cập

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

3

Trong hướng dẫn ngắn này, chúng ta 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 đối tượng Tệp hoặc Blob, thành phần canvas và thẻ hình ảnh

Trong tất cả các ví dụ bên dưới, chúng tôi giả định rằng chúng tôi đã có sẵn một đối tượng

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

1,

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

4,

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

3 hoặc

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

4

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

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

3 hoặc

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

4, chúng tôi có thể sử dụng API

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    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...
script>

1, vui lòng xem bài viết này về cách chuyển đổi tệp thành chuỗi base64 hoặc dataURL

Chúng tôi cũng sẽ sử dụng API FileReader khi

Hình ảnh là một phần tử Canvas

Nếu chúng tôi có một

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

1 mà chúng tôi muốn chuyển thành chuỗi Base64, chúng tôi có thể sử dụng

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    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...
script>

3 trên phần tử Canvas

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    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...
script>

Theo mặc định, canvas xuất ra định dạng PNG không mất dữ liệu, chúng ta có thể chuyển

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    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...
script>

4,

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    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...
script>

5 hoặc

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    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...
script>

6 sang phương thức

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    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...
script>

3 để có định dạng khác

Khi sử dụng

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    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...
script>

5 hoặc

<canvas width="300" height="150" id="my-canvas">canvas>

<script>
    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...
script>

6, chúng ta có thể chuyển nén hình ảnh làm đối số cuối cùng,

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

60 có nghĩa là nén nhiều,

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

61 có nghĩa là không nén

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

6

Hình ảnh là một yếu tố img

Nếu hình ảnh của chúng tôi là một phần tử

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

4, chúng tôi có thể

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

63 hình ảnh src và chuyển đổi hình ảnh đó thành chuỗi Base64

Ngoài ra, chúng tôi có thể vẽ hình ảnh thành canvas và sau đó chuyển đổi canvas thành phần tử hình ảnh, điều này sẽ hữu ích nếu chúng tôi đang tìm kiếm một định dạng hình ảnh cụ thể

Nếu hình ảnh nằm 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

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

64 được phản ánh trong DataURL

Nếu loại MIME không chính xác thì DataURL cũng sẽ không chính xác

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

1

Vẽ hình ảnh vào canvas

Trước tiên, vẽ hình ảnh thành canvas cho phép chúng tôi chuyển đổi nó sang định dạng khác

Xin lưu ý rằng phương pháp này chậm hơn so với việc chỉ tìm nạp hình ảnh

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

65 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 rất thấp, gây ra sự cố khi chuyển đổi hình ảnh

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

3

kết thúc

Chúng tôi đã chuyển đổi

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

3,

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

4,

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

1 và

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

4 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 được ưu và nhược điểm của từng phương pháp

Làm cách nào để chuyển đổi url thành Base64 trong JavaScript?

Làm cách nào để thay đổi url thành Base64?

Làm cách nào để chuyển đổi url hình ảnh thành Base64?

Làm cách nào để chuyển đổi đường dẫn hình ảnh sang JavaScript Base64?