JavaScript gets picture pixel color and converts to Box-shadow display _javascript tips

First, the principle:
1. Use HTML5 's FileReader API to read pictures
filereader file Reader, used to read client files to, note that when the file is read, the cache is not loaded
eg

var upfile = document.queryselector (' #upfile ');
var filereader = new FileReader ();
Filereader.onload = function (evt)
{ 
  if (filereader.done==filereader.readystate)
  {
     var img = Document.createelement (' img ');
     IMG.SRC = This.result; Base64 is the data URL of
     document.body.appendChild (IMG);
     Console.log (FileReader);
   }
Filereader.readasdataurl (Upfile.files[0]);

2. Use HTML5 canvas getimagedata to get picture pixel information
Getimagedata's literal translation is "Get the image data", his role is to extract pixels from the canvas. So, he's got a return value.

Syntax and return values

Ctx.getimagedata (X,y,width,height);

This is his grammar. And his return value is a ImageData object:

ImageData {width=10, height=10, Data=uint8clampedarray}

This ImageData object includes: Width,height, and a pixel information array of data.

This pixel information array is the most important. He includes Red,green,blue, Alpha, and each with a value of 0-255-even alpha.

The size of the data array is determined by the number of pixels, that is, the ImageData width*height. such as Getimagedata (1,1,1,1), the data is only one pixel information, and Getimagedata (1,1,10,10), there are 10 *10=100 A.

3. Converts pixel information to the value of CSS3 Box-shadow

Second, the implementation of the effect:

Third, the example code:

<! DOCTYPE HTML public>