图片裁切，上传，自动匹配颜色。
生活随笔
收集整理的这篇文章主要介绍了
图片裁切，上传，自动匹配颜色。
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
图片裁切，上传，自动匹配颜色。 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）
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>
- options.loadComplete
- options.loadError
- options.done
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 在项目启动后