HTML5 Canvas Core technology-graphics, animation and game development. Pdf6

Pixel to manipulate Image: Getimagedata () Putimagedata ()

ImageData Object

The call to the Getimagedata () method actually gets a reference to the ImageData object, and the returned object contains 3 properties: 1) Width of the image data width in device pixels 2) Height of image data in device pixels 3) data contains an array of pixel values for each device

Both width and height are read-only unsigned long integers, and each array element contained by the data property represents the corresponding pixel value in the image data, each containing a color component that contains 8 bits integers (explained in detail later)

In order to make the drawing more realistic, the browser may use multiple pixels to represent a pixel, a canvas with a length of 200 pixels, a total of 40,000 pixels, if the browser uses 2 pixels to represent the original 1 pixels, there will be 160000 pixel, which can be viewed by width and height

The Putimagedata () method is not affected by global settings (Globalalpha and globalcompositeoperation, etc.), nor does it use image compositing, shading, and other effects when drawing, and the DrawImage () method, in contrast, Is affected by global properties

The Getimagedata () parameters are X, y, the height of the image, and the width of the image, respectively

The 4 parameters of the Putimagedata () method represent a dirty rectangular area in the image data (in device pixels), and these 4 parameters are optional, and default values are taken if not specified:

The horizontal offset of the painted dirty rectangle from the upper-left corner of the entire image data, in device pixels, by default 0

The vertical offset of the painted dirty rectangle from the upper-left corner of the entire image data, in device pixels, by default 0

The width of the dirty rectangle in device pixels, which by default is the width of the entire image

Dirty rectangle height in device pixels, which is the height of the entire image by default

Note that the second and third parameters of the Putimagedata () method are measured in CSS pixels

An array in the ImageData object

The Data property in the ImageData object points to an array of 8-bit binary integers whose values are between 0-255, representing the red, green, blue, and transparency components of a number of pixels

Iterate through each array

for (Var index=0;index<length;++i) {

Value=data[index];

}

Traverse each pixel in reverse

Index=length-1;

while (index >=0) {

Value=data[index];

index--;

}

Only alpha values are processed and the red-green-blue component is not modified

for (index=3;index<length-4;index+=4) {

Data[index]= ...;

}

Only the red-green-blue component is processed and the alpha value is not modified

for (index=0;index<length-4;index+=4) {

Data[index]= ...;

Data[index+1]= ...;

Data[index+2]= ...;

}

Image Filters

Implement filter effects by manipulating individual pixels

Negative filter, reverse, 255 minus current component, alpha value unchanged

A black and white filter that calculates the average of the red and green blue components of each pixel and sets the three components to this value

Emboss filter, based on the difference between the RGB value of the previous pixel in the current pixel and the RGB value of its latter pixel plus 128

In measures related to image data, you should use device pixels rather than CSS pixels

Working with images with worker threads

When the browser executes the JavaScript code, it uses the main thread, and can use the worker thread to handle some complex operations so that the browser responds to the user's actions in a timely manner.

When the main thread executes this line of sunglassfilter=new work (' Sunglassfilter.js '), a worker thread is created, and the file name passed to the work constructor represents the JavaScript code file that the worker process will execute. Variable sunglassfilter can be called in other functions to implement some communication

Animating with Images

Fade in and out by setting setinterval () to continuously reduce the alpha value of each pixel

Security issues in Image rendering

The Html5canvas specification allows you to draw images that are not part of your own (other domains), but you cannot save or modify images in other domains through CANVASAPI

Security mechanism principle: each canvas has a origin-clean flag bit, the initial value is true, if DrawImage () is used to draw an image in another domain, the value of Origin-clean will be set to False The canvas, which is itself false, is drawn to the current canvas, still false, and throws an exception to the canvas call Todataurl () or Getimagedata () that Origin-clean is False

The browser treats the user's file system as two different domains from the environment in which the application is running, so the file system picture cannot be saved or modified by default

Workaround: Specify the "--allow-file-access-from-files" parameter on the command line to Qidong the Chrome browser, Call Netscape.security.PriviegeManager.enablePrivilege ("Universalbrowserread") when using Firefox browser;