Hướng dẫn binary string to file javascript - chuỗi nhị phân đến tệp javascript

Tôi đã chơi với một vài thư viện mã hóa JS (Cryptojs, SJCL) và phát hiện ra các vấn đề liên quan đến API Blob/File API và JavaScript "chuỗi nhị phân".

Tôi nhận ra rằng mã hóa thậm chí không thực sự phù hợp, vì vậy đây là một kịch bản đơn giản hóa nhiều. Chỉ cần đọc một tệp bằng cách sử dụng ReadAsbinaryString và sau đó tạo BLOB:

>>> reader.result
"GIF89a����ÿÿÿÿÿÿ!þCreated with GIMP�,�������D�;"
>>> reader.result.length
56
>>> typeof reader.result
"string"
>>> blob = new Blob([reader.result], {type: "image/gif"})
Blob { size=64, type="image/gif", constructor=function(), more...}

Tôi đã tạo ra một JSFiddle về cơ bản sẽ thực hiện những điều trên: nó chỉ cần đọc bất kỳ tệp tùy ý nào, tạo một đốm màu từ nó và xuất ra chiều dài so với kích thước: http://jsfiddle.net/6l82t/1/

Có vẻ như, khi tạo BLOB từ "chuỗi nhị phân (JavaScript)", một cái gì đó có mã hóa ký tự kết thúc kết quả.

Nếu một tệp không nhị phân được sử dụng, bạn sẽ thấy rằng độ dài của blob và chuỗi nhị phân gốc là giống hệt nhau.

Vì vậy, có một cái gì đó xảy ra khi cố gắng tạo một blob/tệp từ chuỗi JavaScript không phải là Plaintext và tôi cần bất cứ điều gì sẽ không xảy ra. Tôi nghĩ rằng nó có thể có liên quan đến thực tế là các chuỗi JS là UTF-16?

Có một chuỗi liên quan (có thể) ở đây: API tệp HTML5 được đọc dưới dạng văn bản và nhị phân

Tôi có cần phải lấy kết quả được giải mã (UTF-16) và "chuyển đổi" chúng sang UTF-8 trước khi đưa chúng vào một blob/tệp không?

Làm việc với ai đó trong #HTML5 trên freenode, chúng tôi đã xác định rằng nếu bạn đọc trực tiếp một mảng con và sau đó tạo blob từ đó bằng cách sử dụng Uint8array, các byte hoạt động tốt. Bạn có thể thấy một fiddle mà về cơ bản làm điều đó ở đây: http://jsfiddle.net/gh7ps/4/

Vấn đề là, ít nhất là trong kịch bản của tôi, tôi sẽ kết thúc với một chuỗi nhị phân và muốn tìm ra cách chuyển đổi trực tiếp nó thành một blob để sau đó tôi có thể sử dụng tải xuống của HTML5 để cho phép người dùng nhấp vào để tải xuống để tải xuống để tải xuống Blob trực tiếp.

Thanks!

Phương pháp readAsBinaryString được sử dụng để bắt đầu đọc nội dung của Blob hoặc File được chỉ định. Khi hoạt động đọc kết thúc, readyState trở thành DONEFileReader.loadend_event được kích hoạt. Vào thời điểm đó, thuộc tính result chứa dữ liệu nhị phân thô từ tệp.

Lưu ý rằng phương pháp này đã được xóa khỏi thông số kỹ thuật API tệp, nhưng được giới thiệu lại để tương thích ngược. Sử dụng FileReader.readAsArrayBuffer() được khuyến nghị.

Cú pháp

Thông số

const canvas = document.createElement('canvas');
const height = 200;
const width  = 200;

canvas.width  = width;
canvas.height = height;

const ctx = canvas.getContext('2d');

ctx.strokeStyle = '#090';
ctx.beginPath();
ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
ctx.stroke();

canvas.toBlob((blob) => {
  const reader = new FileReader();

  reader.onload = () => {
    console.log(reader.result);
  }

  reader.readAsBinaryString(blob);
});
0

Blob hoặc File từ đó đọc.

Giá trị trả về

Ví dụ

const canvas = document.createElement('canvas');
const height = 200;
const width  = 200;

canvas.width  = width;
canvas.height = height;

const ctx = canvas.getContext('2d');

ctx.strokeStyle = '#090';
ctx.beginPath();
ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
ctx.stroke();

canvas.toBlob((blob) => {
  const reader = new FileReader();

  reader.onload = () => {
    console.log(reader.result);
  }

  reader.readAsBinaryString(blob);
});

Thông số kỹ thuật

Sự chỉ rõ
Api file # ReadAsbinaryString
# readAsBinaryString

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm