Двоичный массив на холст

Я хотел бы загрузить изображение jpeg на холст из двоичного массива (в настоящее время пытается использовать Uint8Array). Я искал всю сеть для решения, но все, что я мог найти, это преобразование массива в base64, а затем загрузку изображения, которое не очень эффективно.Двоичный массив на холст

Вот мой код, используемый для загрузки изображения:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<canvas id="MainImage" width="756" height="600">Your browser doesn't support html5</canvas> 
<script type="text/javascript"> 
_Request = new XMLHttpRequest(); 
var url = "http://localhost/AAA/S.jpg"; 
try { 
    _Request.onreadystatechange = function() { 
     if (_Request.readyState == 4 && _Request.status == 200) { 
     var downloadedBuffer = _Request.response; 
     if (downloadedBuffer) { 
      var binaryByteArr = new Uint8Array(downloadedBuffer); 
     } 
     } 
     _Request.open('GET', url, true); 
     _Request.responseType = 'arraybuffer'; 
     _Request.send(); 
} catch (e) { 
} 
</script> 
</body> 
</html>

Я хотел бы загрузить этот обработанный массив изображения на холст.

Это всего лишь образец, мой исходный код получает двоичный массив с несколькими изображениями jpeg в одном массиве, поэтому другие методы не будут работать.

Любая помощь будет оценена

источник

2013-09-24 Gilad

Так оно и есть. Нет другого способа, чем преобразовать массив байтов в URL-адрес, кодированный base64, и использовать его как 'src' для изображения, затем нарисовать изображение на холсте. – devnull69

Этот путь« слишком неправильный », чтобы быть« просто » это'. Я уверен, что есть другой способ. – Gilad

Я не вижу большой разницы между созданием URL-адреса данных или URL-адреса объекта. В любом случае вам нужно создать изображение и нарисовать изображение на холсте. Вы не можете использовать массив байтов «как есть». createObjectURL помечен как «экспериментальная технология» на MDN – devnull69

Предполагая, что у вас есть способ разделения двоичного массива в массивы на одно изображение (либо по известной длине или с помощью заголовка JPEG, чтобы определить новое изображение), вы можете использовать Blob и объект URL:

Пример (на основе this example from MDN):

var imageData = GetTheTypedArraySomehow(); 
var blob = new Blob([imageData], {type: "image/jpeg"}); 
var url = URL.createObjectURL(blob);

Теперь вы можете установить url в src для изображения ::

var img = new Image(); 
img.onload = function() { 
    /// draw image to canvas 
    context.drawImage(this, x, y); 
} 
img.src = url;

источник

2013-09-24 08:42:51 K3N

'ReferenceError: GetTheTypedArraySomehow не определен', где вы определили функцию? – guradio

@ guradio - это мнимая функция, в которой вы получите свои собственные данные изображения. – sshow

Двоичный массив на холст

ответ

Смежные вопросы