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

Source: Internet
Author: User

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>  

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.