首頁 > 開發者 > JavaScript
JavaScript擷取圖片像素顏色並轉換為box-shadow顯示，boxshadow
一、原理：
1.使用HTML5的FileReader API讀取圖片
FileReader檔案讀物器，用於讀取用戶端檔案到，注意，檔案讀取完畢後並不會載入緩衝
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的data url資料 document.body.appendChild(img); console.log(fileReader); }}fileReader.readAsDataURL(upfile.files[0]);
2.使用HTML5 canvas 的 getImageData 擷取圖片像素資訊
getImageData的直譯即“獲得映像資料”，他的作用是從canvas中提取像素出來。所以，他是有傳回值的。
文法及傳回值
ctx.getImageData(x,y,width,height);這就是他的文法。而他的傳回值是一個ImageData對象：
ImageData { width=10, height=10, data=Uint8ClampedArray}這個ImageData對象包括：width,height,以及一個像素資訊數組data。
這個像素資訊數組是重中之重。他包括red,green,blue,和alpha,且每個都是0-255的數值——連 alpha 也是。
這個data數組的大小由像素個數決定，即ImageData的width*height.如getImageData(1,1,1,1)，那data就只有一個像素資訊；而getImageData(1,1,10,10)，則有10*10=100個。
3.將像素資訊轉換為CSS3 box-shadow的值
二、實現效果：
三、執行個體代碼：
<!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <title>擷取圖片像素顏色,轉換為css3 box-shadow</title> <style type="text/css"> body{margin: 0px; background:#f2f2f0;} p{margin:0px;} .title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;} .file{position:absolute; width:100%; font-size:90px;} .filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;} .filebtn:hover{background:#04bc0d;} .showimg{margin:10px auto 10px auto; -webkit-transition: all .3s; transition: all .3s;} .showimg span{width:1px; height:1px; display:block; margin: -1px 0px 0px -1px;} .css_code{margin:10px; padding:10px; display:none; border:1px solid #FFCC00; font-size:12px; background:#F1F1F1; white-space:pre-wrap; word-wrap:break-word; height:300px; overflow:auto;} .css_code:hover{ background:#DEFEDE; } </style> <script type="text/javascript"> window.onload = function(){ var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var showimg = document.getElementById('showimg'); var shadow = showimg.getElementsByTagName('span')[0]; var css_code = document.getElementById('css_code'); document.getElementById('img').onchange = function(){ var img = event.target.files[0]; // 檢查能否讀取圖片 if(!img){ return ; } // 檢查圖片類型 if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){ alert('圖片只能是jpg,gif,png'); return ; } // 檢查圖片尺寸 if(img.size > 120*1024){ alert('圖片不能大於120K'); return ; } // file reader var reader = new FileReader(); reader.readAsDataURL(img); reader.onload = function(e){ // reader onload start var image = new Image(); image.src = e.target.result; image.onload = function(){ // image onload start var img_width = this.width; var img_height = this.height; // 設定畫布尺寸 canvas.width = img_width; canvas.height = img_height; // 將圖片按像素寫入畫布 context.drawImage(this, 0, 0, img_width, img_height); // 讀取圖片像素資訊 var imageData = context.getImageData(0, 0, img_width, img_height); var arrbox = [], length = imageData.data.length; // 產生box-shadow for(var i=0; i<length; i++){ if(i%4 === 0){ // 每四個元素為一個像素資料 r,g,b,alpha var x = i/4%img_width + 1; // 橫座標 var y = Math.floor(i/4/img_width) + 1; // 縱座標 var alpha = Math.round(imageData.data[i+3]/255*100)/100; // alpha 值 if(imageData.data[i+3]==255){ // 沒有alpha 值 var hex = gethex(imageData.data[i], imageData.data[i+1], imageData.data[i+2]); arrbox.push(x + 'px ' + y + 'px #' + hex); }else if(alpha>0){ // 有alpha 值 var rgba = imageData.data[i] + ',' + imageData.data[i+1] + ',' + imageData.data[i+2] + ',' + alpha; arrbox.push(x + 'px ' + y + 'px rgba(' + rgba + ')'); } } } // 將資料寫入dom showimg.style.width = img_width + 'px'; showimg.style.height = img_height + 'px'; shadow.style.boxShadow = arrbox.join(','); // 輸出CSS3 box-shadow css_code.style.display = 'block'; css_code.innerHTML = 'box-shadow: ' + arrbox.join(','); // 擷取16進位顏色 function gethex(r,g,b){ r = r.toString(16); g = g.toString(16); b = b.toString(16); // 補0 r.length==1? r = '0' + r : ''; g.length==1? g = '0' + g : ''; b.length==1? b = '0' + b : ''; var hex = r + g + b; // 簡化處理,如 FFEEDD 可以寫為 FED if(r.slice(0,1)==r.slice(1,1) && g.slice(0,1)==g.slice(1,1) && b.slice(0,1)==b.slice(1,1)){ hex = r.slice(0,1) + g.slice(0,1) + b.slice(0,1); } return hex; } } // image onload end } // reader onload end } } </script> </head> <body> <p class="title">擷取圖片像素顏色,轉換為CSS3 box-shadow</p> <p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">請選擇圖片(小於120K)</label></p> <p class="showimg" id="showimg"><span></span></p> <p class="css_code" id="css_code"></p> </body> </html>
您可能感興趣的文章:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
