當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

图片裁切，上传，自动匹配颜色。

發布時間：2025/6/17 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了图片裁切，上传，自动匹配颜色。小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

圖片裁切，上傳，自動匹配顏色。 photoclip插件學習。 https://github.com/baijunjie/PhotoClip.js是官方文檔。使用方法很簡單。不過我在使用的過程中遇到幾個問題。 1、按官方文檔的教程寫完代碼以后，我的圖片只能左右移動，無法上下拖拽，在豎直方向拖動的話，在拖動結束時會回到初始的豎直方向的位置。解決方法：本來一直以為是js本地項目的js代碼與插件有沖突，不過在改動js后，本地仍然有這個問題。最后發現是本地默認的reset的樣式，改不了插件的樣式，導致無法正常使用。將 div, dt, dd, li, h3, h4, h5, h6 { max-height: 100% }默認樣式刪除后就可以正常使用了。 2、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.οnlοad=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);//bottomlet 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="讀取圖像" οnclick="readAsDataURL()" /> </p> <div id="result" name="result">為圖片的主色</div> </body> </html>

轉載于:https://www.cnblogs.com/qdcnbj/p/9588171.html

總結

以上是生活随笔為你收集整理的图片裁切，上传，自动匹配颜色。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：利用ConcurrentHashMap来
下一篇： springboot2.X 在项目启动后