Databases
StackOverflow2013
Postsdbo
POSave captured png as arraybuffer
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSave captured png as arraybuffer
    primarykey
    data
    text
    <p>I'm trying to save an image to dropbox, and having trouble getting the convertion correct. I have an img (captured using <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/Camera" rel="nofollow">this</a> sample) and I want to store it to dropbox that accepts an ArrayBuffer (sample <a href="https://github.com/dropbox/dropbox-js/blob/stable/guides/snippets.md" rel="nofollow">here</a>)</p> <p>This is the code I found that should to the two conversions, first to a base64, then into a ArrayBuffer</p> <pre><code> function getBase64Image(img) { // Create an empty canvas element var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; // Copy the image contents to the canvas var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); // Get the data-URL formatted image // Firefox supports PNG and JPEG. You could check img.src to // guess the original format, but be aware the using "image/jpg" // will re-encode the image. var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); } function base64ToArrayBuffer(string_base64) { var binary_string = window.atob(string_base64); var len = binary_string.length; var bytes = new Uint8Array(len); for (var i = 0; i &lt; len; i++) { var ascii = binary_string.charCodeAt(i); bytes[i] = ascii; } return bytes.buffer; } </code></pre> <p>Saving is started like this</p> <pre><code> var img = $('#show-picture')[0]; var data = base64ToArrayBuffer( getBase64Image(img)); dropbox.client.writeFile(moment().format('YYYYMMDD-HH-mm-ss')+'.png', data, function (error, stat) { if (error) { return dropbax.handleError(error); } // The image has been succesfully written. }); </code></pre> <p>Problem is that I get a corrupted file saved, and is a bit confused on what's wrong.</p> <p>*<em>EDIT *</em></p> <p>Here's the link to the original file <a href="https://www.dropbox.com/s/ekyhvu2t6d8ldh3/original.PNG" rel="nofollow">https://www.dropbox.com/s/ekyhvu2t6d8ldh3/original.PNG</a> and here to the corrupted. <a href="https://www.dropbox.com/s/f0oevj1z33brpur/20131219-22-23-14.png" rel="nofollow">https://www.dropbox.com/s/f0oevj1z33brpur/20131219-22-23-14.png</a></p> <p>I'm using this version of the dropbox.js: //cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js</p> <p>As you can see the corrupted is slighty bigger 23,3KB vs 32,6 KB Thanks for any help</p> <p>Larsi </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLarsi
    1. USLarsi
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSave captured png as arraybuffer
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat browser and what version of the Dropbox library? And what's wrong with the image that's saved? (I assume by "corrupted" you mean that it won't open in whatever tool you're using... any more hints? Is the file size reasonable?) I just did a very similar test (`toDataURL`, `atob`, and `Uint8Array`) with Chrome on OS X and https://www.dropbox.com/static/api/dropbox-datastores-1.0-latest.js, and it seems to work.
      singulars
      1. POSave captured png as arraybuffer
      1. USsmarx
    2. COHi @smarx ! Thanks for looking into this. I've added links to the original and corrupted file
      singulars
      1. POSave captured png as arraybuffer
      1. USLarsi
    3. CO@smarx I've just tried with the latest dropbox.js and its working. Thanks for your update. Post an answer and I'll accept it.
      singulars
      1. POSave captured png as arraybuffer
      1. USLarsi
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload