圖片裁切，上傳，自動匹配顏色。

時間 2020-05-22

標籤圖片裁切上傳自動匹配顏色简体版

原文原文鏈接

圖片裁切，上傳，自動匹配顏色。

photoclip插件學習。

https://github.com/baijunjie/PhotoClip.js是官方文檔。

使用方法很簡單。不過我在使用的過程當中遇到幾個問題。

一、按官方文檔的教程寫完代碼之後，個人圖片只能左右移動，沒法上下拖拽，

在豎直方向拖動的話，在拖動結束時會回到初始的豎直方向的位置。

解決方法：原本一直覺得是js本地項目的js代碼與插件有衝突，不過在改動js後，本地仍然有這個問題。最後發現是本地默認的reset的樣式，改不了插件的樣式，致使沒法正常使用。將 div, dt, dd, li, h3, h4, h5, h6 {

max-height: 100%

}默認樣式刪除後就能夠正常使用了。

二、options.loadStart

type: Function

圖片開始加載的回調函數。this 指向當前 PhotoClip 的實例對象，並將正在加載的 file 對象做爲參數傳入。（若是是使用非 file 的方式加載圖片，則該參數爲圖片的 url）

options.loadComplete

type: Function

圖片加載完成的回調函數。this 指向當前 PhotoClip 的實例對象，並將圖片的 <img> 對象做爲參數傳入。

options.loadError

type: Function

圖片加載失敗的回調函數。this 指向當前 PhotoClip 的實例對象，並將錯誤信息做爲第一個參數傳入，若是還有其它錯誤對象或者信息會做爲第二個參數傳入。

options.done

type: Function

裁剪完成的回調函數。this 指向當前 PhotoClip 的實例對象，會將裁剪出的圖像數據DataURL做爲參數傳入。

這裏應該注意options.done,options.loadComplete和options.loadstart三個函數。

options.done是裁剪完成，執行的函數會有個參數dataurl，裏面是圖片裁切部分的base64編碼。這裏回調函數能夠用來處理裁切出來的圖片數據。

options.loadStart函數是圖片開始加載的回調函數。

我使用這個插件實現的基本功能是點擊上傳按鈕能夠看到圖片預覽圖，及一個圖片的縮略圖。上傳多張圖片時，點擊縮略圖，能夠看到不一樣的預覽圖。而且經過點擊縮略圖的刪除按鈕，能夠刪除任何一個圖片。

options.loadComplete是加載完成圖片時調用的函數function(data) {這個data是預覽圖的dom節點}

在個人項目中遇到些問題就是在預覽多張圖片時，在刪除某張圖片後馬上使用new PhotoClip函數去加載同一張圖片，這時是沒法加載這張圖片的。

這時我使用pc.clear();函數，在上張圖片加載完後點擊刪除圖片時clear清除緩存的圖片。但此時會發現cleat圖片之後，預覽的圖片img也會消失，沒法完成點擊圖片預覽的功能了。因此這時能夠在options.loadstart函數中使用pc.clear()，在加載下一張圖片前，清除上一張圖片，這時不但實現了加載刪除的相同的圖片，並且能夠在刪除某個圖片時，能夠經過點擊其餘圖片實現預覽功能。

在項目過程當中使用了另外一個插件，color-thief.js。是個能夠提取圖片主題色的js插件。不過在使用過程當中發現此插件是自動忽略白色的像素。當你用這個圖片提取一張純白圖片中間有一個其餘顏色的點時，顯示的主題色爲這個非白色點的顏色。

因此在學習插件過程當中發現

r = pixels[offset + 0];

g = pixels[offset + 1];

b = pixels[offset + 2];

a = pixels[offset + 3];

//If pixel is mostly opaque and not white

if (a >= 125) {

if (!(r > 250 && g > 250 && b > 250)) {

pixelArray.push([r, g, b]);

}

在這段代碼中,a爲某點像素的透明度，從上面代碼發現，插件是選取圖片的透明度大於125和非白色點來進行取值和處理的。(尚不知道爲什麼做者這麼寫)。

我對這段代碼作了修改，我將if判斷刪除。

//If pixel is mostly opaque and not white

pixelArray.push([r, g, b]);這時插件取色的點會增多。可是發現仍是有些問題，有時沒法取到白色的像素，我認爲應該是白色的點做爲無像素處理的，這時頁面會報錯，顯示palette爲null，我便強制改變了此函數。

　ColorThief.prototype.getColor = function(sourceImage, quality) {

var palette = this.getPalette(sourceImage, 5, quality);

// 改變沒法讀取白色邊的狀況。 -zcj

if(palette==null){

palette = [];

palette[0] = [255,255,255]

}

//兩個註釋之間爲(添加)改變的代碼。強制添加了判斷。由於主色是不少像素點共同判斷的，我將 palette[0] = [255,255,255]，我認爲只是添加了部分白色的像素點對總體影響應該不大。

var dominantColor = palette[0];

return dominantColor;

};

此插件使用的是中位切分法來進行顏色提取，你們能夠點擊此連接瞭解下這種算法。看起來仍是很複雜的。 https://blog.csdn.net/shanglianlm/article/details/50051269

附上demo代碼複製粘貼便可使用

demo是提取圖片四個邊的寬度爲10px主題色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo2</title>
<style>
#result{
width:100px;
height: 100px;
}
.div1{
width: 100%;
height: 100px;
}
.div2{
width: 100%;
height: 100px;
}
.div3{
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<script src="./src/color-thief.js"></script>
<script>
function readAsDataURL(){
//檢驗是否爲圖像文件
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚，這個須要圖片！");
return false;
}
var reader = new FileReader();
//將文件以Data URL形式讀入頁面
reader.readAsDataURL(file);
reader.onload=function(e){
 
var result=document.getElementById("result");
let context = document.createElement('canvas');
context.setAttribute('width','200');
context.setAttribute('height','200');
let ctx = context.getContext('2d');
document.querySelector('body').appendChild(context)
let image = new Image();
image.src = e.target.result;
 
 
image.onload = function(){
ctx.drawImage(image,0,0,100,100);
let context1 = document.createElement('canvas');
context1.setAttribute('width','200');
context1.setAttribute('height','200');
let ctx1 = context1.getContext('2d');
document.querySelector('body').appendChild(context1);
 
let ctx1data = ctx.getImageData(0,0,100,10);
let ctx1data1 = ctx.getImageData(0,0,10,100);
let ctx1data2 = ctx.getImageData(90,0,10,100);
let ctx1data3 = ctx.getImageData(0,90,100,10);
console.log(ctx1data);
 
let context2 = document.createElement('canvas');
context2.setAttribute('width','200');
context2.setAttribute('height','200');
let ctx2 = context2.getContext('2d');
document.querySelector('body').appendChild(context2);
 
let context3 = document.createElement('canvas');
context3.setAttribute('width','200');
context3.setAttribute('height','200');
let ctx3 = context3.getContext('2d');
document.querySelector('body').appendChild(context3);
 
let context4 = document.createElement('canvas');
context4.setAttribute('width','200');
context4.setAttribute('height','200');
let ctx4 = context4.getContext('2d');
document.querySelector('body').appendChild(context4);
 
 
ctx1.putImageData(ctx1data,0,0); //top
ctx2.putImageData(ctx1data1,0,0);//left
ctx3.putImageData(ctx1data2,0,0);//right
ctx4.putImageData(ctx1data3,0,0);//bottom
 
let colorThief = new ColorThief();
result.style.background = `rgb(${colorThief.getColor(image)[0]},${colorThief.getColor(image)[1]},${colorThief.getColor(image)[2]})`;
let maincolor = colorThief.getColor(image);
console.log(result.style.background)
// console.log(colorThief.getColor(image)); 獲取整張圖片的主色
console.log(colorThief.getColor(context1));
console.log(colorThief.getColor(context2));
console.log(colorThief.getColor(context3));
console.log(colorThief.getColor(context4));
//獲取四個邊合在一塊兒的平均色
//div2爲四個邊的平均
let colorR = (colorThief.getColor(context1)[0]+colorThief.getColor(context2)[0]+colorThief.getColor(context3)[0]+colorThief.getColor(context4)[0])/4
let colorG = (colorThief.getColor(context1)[1]+colorThief.getColor(context2)[1]+colorThief.getColor(context3)[1]+colorThief.getColor(context4)[1])/4
let colorB = (colorThief.getColor(context1)[2]+colorThief.getColor(context2)[2]+colorThief.getColor(context3)[2]+colorThief.getColor(context4)[2])/4
let colorRgb = `(${colorR},${colorG},${colorB})`; //rgb
console.log(colorRgb)
let showcolorrgb = document.createElement('div');
showcolorrgb.classList.add('div2');
showcolorrgb.innerHTML = '四個邊的平均色'
showcolorrgb.setAttribute('style',`background:rgb${colorRgb}`);
document.querySelector('body').appendChild(showcolorrgb);
 
//在六種顏色中找到最接近匹配顏色的顏色
//黃色：rgb(225,220,50),紅色(180,72,78),藍色(49,121,195)，綠色(115,185,85),黑色(14,17,20)，白色(255,255,255);
//div3爲匹配後的顏色
let min = 442;
let numorder = 0;
let colorlist_Arr = [[225,220,50],[180,72,78],[49,121,195],[115,185,85],[14,17,20],[255,255,255]];
for(let z=0;z<6;z++){
let minA = Math.floor(Math.sqrt(Math.pow(colorlist_Arr[z][0]-colorR,2)+Math.pow(colorlist_Arr[z][1]-colorG,2)+Math.pow(colorlist_Arr[z][2]-colorB,2)));
console.log(minA)
if(minA<min){
min = minA;
numorder = z;
}
 
 
}
let divv = document.createElement('div');
divv.classList.add('div3');
divv.innerHTML = '匹配後的顏色,六種顏色之1'
divv.setAttribute('style',`background:rgb(${colorlist_Arr[numorder][0]},${colorlist_Arr[numorder][1]},${colorlist_Arr[numorder][2]})`);
document.querySelector('body').appendChild(divv);
 
 
//獲取圖片中的其餘顏色
//div1爲圖片中其餘色，第一個爲主色
let colorThiefban = colorThief.getPalette(image, 8);
console.log(colorThiefban)
for(let i = 0;i<colorThiefban.length;i++){
let div = document.createElement('div');
div.classList.add('div1');
div.innerHTML = '圖片中其餘色，第一個爲主色'
div.setAttribute('style',`background:rgb(${colorThiefban[i][0]},${colorThiefban[i][1]},${colorThiefban[i][2]})`);
document.querySelector('body').appendChild(div);
}
//顯示文件
// result.innerHTML='<img src="' + e.target.result +'" alt="" />';
}
 
}
}
</script>
<p>
<label>請選擇一個文件：</label>
<input type="file" id="file" />
<input type="button" value="讀取圖像" onclick="readAsDataURL()" />
</p>
<div id="result" name="result">爲圖片的主色</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。