Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Canvas will <em>always</em> return <strong>24-bit</strong> data + an 8-bit alpha channel (RGBA). Each component value will of course have 8 bits or 256 values. This is per specification. It will never return 8-bit indexed image data however so if you somehow run into 8-bit (indexed) image data then you are probably reading the data wrong or from the from object/array.</p> <p>From the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation" rel="nofollow noreferrer">specification</a>:</p> <blockquote> <p>imagedata . data</p> <pre><code>Returns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255. </code></pre> </blockquote> <p>And just to cover the opposite aspect: if you draw in a 8-bit indexed palette image such as a PNG-8 or a GIF using 2 - 256 colors their indexed palette will always be converted to RGBA buffer (it's actually converted to RGBA at load time by the browser so this is not something canvas do itself).</p> <p>To read data from canvas you have two levels (or three for more advanced use), the image data object which contains various information including a reference to the actual pixel array view:</p> <pre><code>var imageData = context.getImageData(x, y, w, h); </code></pre> <p>From this object we obtain the <strong>data view</strong> for the pixels which is by default a <code>Uint8ClampedArray</code> view:</p> <pre><code>var pixelData = imageData.data; </code></pre> <p>And for more advanced usage we could get the raw byte buffer from this (if you need to provide other views, ie. Uint32Array) can be obtained from:</p> <pre><code>var rawBytes = pixelData.buffer; var buffer32 = new Uint32Array(rawBytes); </code></pre> <p>But lets stick to the default 8-bit clamped view - to read from it you need to know that the pixels are <em>always</em> packed into RGBA or as 32-bit values. So we can get a single pixel by doing:</p> <pre><code>var r = pixelData[0]; var g = pixelData[1]; var b = pixelData[2]; var a = pixelData[3]; </code></pre> <p>The next pixel will start at index 4 and so on.</p> <p>If you for some reason need to reduce the palette to indexed palette you would have to provide the algorithm for this yourselves. There are many out there from simple and bad to more complex and accurate ones. But this is not something you will be able to do out of the box with canvas. Some pointers can be found in <a href="https://stackoverflow.com/questions/3849115/image-palette-reduction">this answer</a> or you can use a library <a href="https://github.com/antimatter15/jsgif" rel="nofollow noreferrer">such as this</a> which will create a (animated) GIF from canvas.</p> <p>Also be aware of that if an image drawn into canvas didn't fulfill cross-origin requirements (CORS) the canvas will be "tainted" (security-wise) and the <code>getImageData()</code> will return a an array with values set to 0.</p>
    singulars
    1. This table or related slice is empty.
    1. POhtml5 canvas always returns 8bits of color when using getImageData()
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USepistemex
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POhtml5 canvas always returns 8bits of color when using getImageData()
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. This table or related slice is empty.
 

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