Hướng dẫn convert base64 to binary javascript - chuyển đổi base64 sang javascript nhị phân

Question

Tôi có dữ liệu nhị phân được mã hóa cơ sở64 trong một chuỗi:

Nội dung chính Show

Ví dụ đầy đủ:
Phần thưởng x 2 - Mở tệp Blob trong Tab mới cho Internet & NBSP; Explorer & NBSP; 11
Base64 JavaScript là gì?
Blob và Base64 là gì?
Giải mã base64 là gì?
Phương pháp BTOA trong JavaScript là gì?

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

Tôi muốn tạo URL

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

8 chứa dữ liệu này và hiển thị nó cho người dùng:

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

Tôi đã không thể tìm ra cách tạo Blob.

Trong một số trường hợp, tôi có thể tránh điều này bằng cách sử dụng URL

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

9 thay thế:

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

Tuy nhiên, trong hầu hết các trường hợp, các URL ____29 rất lớn.

Làm thế nào tôi có thể giải mã một chuỗi base64 thành một đối tượng blob trong javascript?

Hỏi ngày 26 tháng 4 năm 2013 lúc 21:51Apr 26, 2013 at 21:51

0

Hàm

const byteCharacters = atob(b64Data);

1 sẽ giải mã một chuỗi được mã hóa cơ sở64 thành một chuỗi mới với một ký tự cho mỗi byte của dữ liệu nhị phân.

const byteCharacters = atob(b64Data);

Mỗi điểm mã của nhân vật (Charcode) sẽ là giá trị của byte. Chúng ta có thể tạo một mảng các giá trị byte bằng cách áp dụng điều này bằng phương thức

const byteCharacters = atob(b64Data);

2 cho mỗi ký tự trong chuỗi.

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

Bạn có thể chuyển đổi mảng giá trị byte này thành một mảng byte được gõ thực bằng cách chuyển nó cho hàm tạo

const byteCharacters = atob(b64Data);

3.

const byteArray = new Uint8Array(byteNumbers);

Điều này đến lượt nó có thể được chuyển đổi thành một đốm màu bằng cách bọc nó trong một mảng và chuyển nó cho hàm tạo

const byteCharacters = atob(b64Data);

4.

const blob = new Blob([byteArray], {type: contentType});

Mã trên hoạt động. Tuy nhiên, hiệu suất có thể được cải thiện một chút bằng cách xử lý

const byteCharacters = atob(b64Data);

5 trong các lát nhỏ hơn, thay vì tất cả cùng một lúc. Trong thử nghiệm thô của tôi, 512 byte dường như là một kích thước lát tốt. Điều này cho chúng ta chức năng sau.

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

Ví dụ đầy đủ:

Đã trả lời ngày 26 tháng 4 năm 2013 lúc 21:51Apr 26, 2013 at 21:51

4

Dưới đây là một phương pháp tối thiểu hơn mà không có bất kỳ sự phụ thuộc hoặc thư viện nào. Nó yêu cầu API tìm nạp mới. (Tôi có thể sử dụng nó không?)
It requires the new fetch API. (Can I use it?)

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(console.log)

Với phương pháp này, bạn cũng có thể dễ dàng nhận được ReadableStream, ArrayBuffer, Text và JSON. (FYI Điều này cũng hoạt động với Node Fetch in Node)
(fyi this also works with node-fetch in Node)

Như một chức năng:

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

0

Nhưng tôi sẽ khuyến khích bạn không sử dụng Base64 ngay từ đầu. Có nhiều cách tốt hơn để gửi và nhận dữ liệu nhị phân. JSON không phải lúc nào cũng là lựa chọn tốt nhất. Nó chiếm nhiều băng thông và thời gian xử lý chất thải (DE). Chúng tôi ví dụ

const byteCharacters = atob(b64Data);

6 thay vì

const byteCharacters = atob(b64Data);

7 và sử dụng

const byteCharacters = atob(b64Data);

8 để gửi các tệp nhị phân. Bạn cũng có thể trả lại tải trọng nhiều phần và giải mã nó bằng cách sử dụng

const byteCharacters = atob(b64Data);

9 đến từ phản hồi của máy chủ. Formdata có thể đi cả hai chiều.don't use base64 in the first place. There are better ways to send and receive binary data. JSON isn't always the best option. it takes up more bandwidth and waste processing time (de)encodeing stuff. Us eg

const byteCharacters = atob(b64Data);

6 instead of

const byteCharacters = atob(b64Data);

7 and use

const byteCharacters = atob(b64Data);

8 to send binary files. you can also return back a multipart payload and decode it using

const byteCharacters = atob(b64Data);

9 that is coming from a server response. FormData can go both ways.

Tôi đã thực hiện một bài kiểm tra hiệu suất đơn giản đối với phiên bản đồng bộ ES6 của Jeremy. Phiên bản đồng bộ sẽ chặn UI trong một thời gian. Giữ DevTool mở có thể làm chậm hiệu suất tìm nạp
The sync version will block UI for a while. keeping the devtool open can slow the fetch performance

Đã trả lời ngày 23 tháng 3 năm 2016 lúc 16:04Mar 23, 2016 at 16:04

Vô tậnEndless

31.3k11 Huy hiệu vàng104 Huy hiệu bạc127 Huy hiệu đồng11 gold badges104 silver badges127 bronze badges

9

Thực hiện tối ưu hóa (nhưng không thể đọc được):

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

1

Đã trả lời ngày 22 tháng 11 năm 2013 lúc 18:23Nov 22, 2013 at 18:23

BacherbacherBacher

1.59611 huy hiệu bạc9 Huy hiệu đồng11 silver badges9 bronze badges

8

Sau đây là mã TypeScript của tôi có thể được chuyển đổi dễ dàng thành JavaScript và bạn có thể sử dụng

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

2

Đã trả lời ngày 20 tháng 3 năm 2019 lúc 9:09Mar 20, 2019 at 9:09

4

Xem ví dụ này: https://jsfiddle.net/pqhdce2l/

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

3

Đã trả lời ngày 27 tháng 11 năm 2016 lúc 17:13Nov 27, 2016 at 17:13

1

Đối với tất cả các hỗ trợ của trình duyệt, đặc biệt là trên Android, có lẽ bạn có thể thêm điều này:

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

4

Đã trả lời ngày 25 tháng 8 năm 2014 lúc 4:01Aug 25, 2014 at 4:01

Jayce Linjayce LinJayce Lin

4271 Huy hiệu vàng6 Huy hiệu bạc10 Huy hiệu đồng1 gold badge6 silver badges10 bronze badges

1

Đối với tất cả những người yêu thích sao chép ngoài kia như tôi, đây là chức năng tải xuống đã nấu chín trên Chrome, Firefox và Edge:

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

5

Đã trả lời ngày 3 tháng 1 năm 2020 lúc 12:03Jan 3, 2020 at 12:03

Eyup Yuseineyup YuseinEyup Yusein

3512 Huy hiệu bạc8 Huy hiệu Đồng2 silver badges8 bronze badges

1

Tôi đang đăng một cách chuyển đổi Base64 khai báo hơn. Mặc dù Async

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

0 rất gọn gàng và tôi thích giải pháp này rất nhiều, nhưng nó không hoạt động trên internet & nbsp; explorer & nbsp; 11 (và có lẽ là cạnh - tôi đã không kiểm tra cái này), ngay cả với polyfill - hãy xem nhận xét của tôi để viết bất tận 'để biết thêm chi tiết.

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

6

Thưởng

Nếu bạn muốn in nó, bạn có thể làm một cái gì đó như:

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

7

Phần thưởng x 2 - Mở tệp Blob trong Tab mới cho Internet & NBSP; Explorer & NBSP; 11

Nếu bạn có thể thực hiện một số tiền xử lý của chuỗi Base64 trên máy chủ, bạn có thể hiển thị nó dưới một số URL và sử dụng liên kết trong

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

1 :)

Đã trả lời ngày 4 tháng 1 năm 2019 lúc 10:42Jan 4, 2019 at 10:42

PapipapiPapi

7416 Huy hiệu bạc8 Huy hiệu đồng6 silver badges8 bronze badges

1

Đối với dữ liệu hình ảnh, tôi thấy đơn giản hơn khi sử dụng

const byteCharacters = atob(b64Data);

6 (không đồng bộ)

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

8

Đã trả lời ngày 16 tháng 7 năm 2014 lúc 15:46Jul 16, 2014 at 15:46

Amir Nissimamir NissimAmir Nissim

3.1432 Huy hiệu vàng23 Huy hiệu bạc19 Huy hiệu đồng2 gold badges23 silver badges19 bronze badges

3

Nếu bạn có thể đứng thêm một phụ thuộc vào dự án của mình, có gói NPM

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

3 tuyệt vời cung cấp chức năng

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

4 tiện dụng. Sau khi được thêm vào

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

5 của bạn, bạn có thể sử dụng nó như thế này:

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

9

Đã trả lời ngày 16 tháng 8 năm 2018 lúc 13:06Aug 16, 2018 at 13:06

1

Tôi nhận thấy rằng Internet Explorer 11 trở nên cực kỳ chậm khi cắt dữ liệu như Jeremy đề xuất. Điều này đúng với Chrome, nhưng Internet & NBSP; Explorer dường như có một vấn đề khi chuyển dữ liệu cắt lát cho trình điều chỉnh Blob. Trên máy của tôi, việc truyền dữ liệu 5 & nbsp; MB làm cho Internet & nbsp; explorer srash và mức tiêu thụ bộ nhớ đang đi qua mái nhà. Chrome tạo ra BLOB ngay lập tức.

Chạy mã này để so sánh:

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

0

Vì vậy, tôi quyết định bao gồm cả hai phương pháp được mô tả bởi Jeremy trong một chức năng. Tín dụng đi đến anh ta cho điều này.

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

1

Đã trả lời ngày 18 tháng 12 năm 2015 lúc 11:11Dec 18, 2015 at 11:11

Martinossmartinossmartinoss

4.9402 Huy hiệu vàng44 Huy hiệu bạc 50 Huy hiệu Đồng2 gold badges44 silver badges50 bronze badges

2

Phương pháp với Fetch là giải pháp tốt nhất, nhưng nếu bất cứ ai cần sử dụng một phương thức mà không có tìm nạp thì ở đây, vì những người được đề cập trước đây không hiệu quả với tôi:

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

2

Đã trả lời ngày 20 tháng 1 năm 2019 lúc 12:03Jan 20, 2019 at 12:03

Akshayakshayakshay

Huy hiệu Bạc 1311 Huy hiệu Đồng1 silver badge13 bronze badges

Trong trình duyệt chỉ

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

3

So sánh với

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

6

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

4

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

5

Phụ thuộc vào kích thước dữ liệu của bạn, chọn hiệu suất một.

Đã trả lời ngày 31 tháng 7 lúc 6:08Jul 31 at 6:08

A.ChanA.ChanA.Chan

5005 huy hiệu bạc6 huy hiệu đồng5 silver badges6 bronze badges

Hai biến thể khác nhau

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

6

Đã trả lời ngày 13 tháng 6 lúc 7:59Jun 13 at 7:59

Puerto Agppuerto AGPPuerto AGP

3735 huy hiệu bạc11 huy hiệu đồng5 silver badges11 bronze badges

Điều này sẽ chứng minh là nhiều giải pháp ngắn.

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

7

Base64String là chuỗi chứa chuỗi cơ sở 64.

Bytearray là mảng bạn cần.

Thay thế Regex là tùy chọn và chỉ ở đó để đối phó với tiền tố như trong trường hợp chuỗi DataURL.

Đã trả lời ngày 10 tháng 6 năm 2021 lúc 9:04Jun 10, 2021 at 9:04

GurukaygurukayGuruKay

3.3352 Huy hiệu vàng19 Huy hiệu bạc8 Huy hiệu đồng2 gold badges19 silver badges8 bronze badges

1

Base64 JavaScript là gì?

Base64 là một nhóm các sơ đồ mã hóa nhị phân với văn bản tương tự đại diện cho dữ liệu nhị phân ở định dạng chuỗi ASCII bằng cách dịch nó thành biểu diễn Radix-64. Thuật ngữ base64 bắt nguồn từ một mã hóa chuyển nội dung MIME cụ thể.a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding.

Blob và Base64 là gì?

Base64 Mã hóa: Sơ đồ mã hóa nhị phân sang văn bản, theo đó một chuỗi các byte tùy ý được chuyển đổi thành một chuỗi các ký tự ASCII có thể in, như được mô tả trong RFC4648.Đối tượng lớn nhị phân (Blob): Một gói dữ liệu riêng biệt được lưu trữ trong cơ sở dữ liệu và được coi là một chuỗi các byte không được giải thích.A binary-to-text encoding scheme whereby an arbitrary sequence of bytes is converted to a sequence of printable ASCII characters, as described in RFC4648. binary large object (BLOB): A discrete packet of data that is stored in a database and is treated as a sequence of uninterpreted bytes.

Giải mã base64 là gì?

Cơ sở 64 giải mã là gì?Base64 là một cách thể hiện dữ liệu nhị phân trong chuỗi ASCII.'Base64 Decoding' là quá trình chuyển đổi biểu diễn Base64-một chuỗi văn bản trông lẻ-trở lại thành dữ liệu nhị phân hoặc văn bản gốc.the process of transforming a base64 representation — a string of odd-looking text — back into the original binary or text data.

Phương pháp BTOA trong JavaScript là gì?

BTOA () Phương thức BTOA () tạo chuỗi ASCII được mã hóa cơ sở64 từ chuỗi nhị phân (nghĩa là, một chuỗi trong đó mỗi ký tự trong chuỗi được coi là byte dữ liệu nhị phân).creates a Base64-encoded ASCII string from a binary string (i.e., a string in which each character in the string is treated as a byte of binary data).

programming javascript Base64 to binary Blob to base64 Decode Base64 JavaScript