ArrayBuffer to blob conversion

JavascriptDjvu

Javascript Problem Overview


I have a project where I need to display djvu schemas in browser.

I found this old library on Github which, as far as I understood, converts djvu files to bmp and then puts them into canvas element.

As I said, library is old(last commit was 5 years ago), so I need to make some corrections. Main problem is that lib uses obsolete BlobBuilder.

Steps I made to solve this problem:

  1. Decompress this library via Chrome DevTools
  2. Initial error is at line 3774 var c = "undefined" != typeof MozBlobBuilder ? MozBlobBuilder : "undefined" != typeof WebKitBlobBuilder ? WebKitBlobBuilder : console.log("warning: cannot build blobs")
  3. I commented out this line
  4. Next, I commented out line c = new c; and some of following lines too.

So, now it looks this way(variable I is array buffer, and ololo1 and ololo2 are some kind of offset and limit)

var c = new Blob(new Uint8Array(new Uint8Array(I,ololo1,ololo2)))
			  , b = b.createObjectURL(c)
			  , c = document.getElementById(kb)
			  , f = c.getContext("2d")
			  , h = new Image
			  , g = a[Ea >> 2]
			  , i = a[Fa >> 2]
			  , j = c.width
			  , k = Math.round(i * j / g);

			h.onload = function()
			{
				var a = g / j;
				4 < a && (a = 4);
				1 > a && (a = 1);
				f.globalAlpha = 1;

				for (N = 0; N < a; N++)
					f.drawImage(h, N, N, g - a + N, i - a + N, 0, 0, j, k),
					f.globalAlpha *= 1 - 1 / a;
				R(h.complete, "Image /bmp.bmp could not be decoded")
			}
			;
			h.onerror = function(errorMsg, url, lineNumber, column, errorObj) {
				console.log(errorMsg, url, lineNumber, column, errorObj);
				console.log("Image /bmp.bmp could not be decoded!")
			}			
			;

And now I stuck at error "Image /bmp.bmp could not be decoded!"(throwed in h.onerror handler).

So, my question is: what I am doing wrong?

Javascript Solutions


Solution 1 - Javascript

I don't know why the author did wrap his Uint8Array in an new one... note that I don't really know either the deprecated BlobBuilder API, but one typo I can see in your code is that you need to wrap your TypedArray in a normal Array:

new Blob([new Uint8Array(buffer, byteOffset, length)]);

The Blob constructor takes a blobParts sequence as first parameter, and then searches for BufferSource, USVStrings and Blob elements in this sequence. So when you pass a TypedArray, it will actually iterate over all the entries of this TypedArray and treat these as USVString (and thus convert their numerical value to UTF-8 strings in the Blob). That's rarely what you want, so better always pass an Array in this constructor.

Solution 2 - Javascript

var buffer = new ArrayBuffer(32);

new Blob([buffer]);

so the Uint8Array should be

new Blob([new Uint8Array([1, 2, 3, 4]).buffer]);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRulispView Question on Stackoverflow
Solution 1 - JavascriptKaiidoView Answer on Stackoverflow
Solution 2 - Javascriptxsilen TView Answer on Stackoverflow