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

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

图片裁切，上传，自动匹配颜色。相关推荐

thinkphp + 美图秀秀api 实现图片裁切上传，带数据库
思路: 1.数据库创建test2 创建表img,字段id,url,addtime 2.前台页: 1>我用的是bootstrap 引入必要的js,css 2>引入美图秀秀的js 3.后台: ...
php+美图秀秀,thinkphp + 美图秀秀api 实现图片裁切上传，带数据库
namespace Home\Controller; use Think\Controller; /** * 图片上传 */ class UploadController extends Contro ...
上传自动显示图片代码
<html> <head> <title>上传自动显示图片</title> <script type="text/javas ...
泛微ECOLOGY9流程模块(建模通用)office附件上传自动转为图片并显示在流程指定附件字段中
泛微ECOLOGY9流程模块'建模通用'office附件上传自动转为图片并显示在流程指定附件字段中目录说明实现将office文件转为PDF文件及PDF文件转换为图片功能 1.首选在服务器中搭建环境 ...
cropper.js 裁剪图片并上传（文档翻译+demo）（转）
官网http://fengyuanchen.github.io/cropper/ 文档https://github.com/fengyuanchen/cropper/blob/master/READM ...
php 上传本地图片到服务器上,PHP如何将图片文件上传到另外一台服务器上
说,我有一个需求,就是一个临时功能.由于工作开发问题,我们有一个B项目,需要有一个商品添加的功能,涉及到添加商品内容,比如商品名字,商品描述,商品库存,商品图片等.后台商品添加的接口已经写完了,但是问 ...
php.ini 米拓_图片无法上传问题“大集结”-米拓建站帮助中心
# 图片无法上传问题"大集结" 如果你在使用米拓系统上传图片或文件时,出现以下问题: 1. 上传图片时提示:创建水印目录失败 2. 后台发布的商品图片前台不显示 3. 图片无法上传 ...
ajax 批量上传图片插件,TinyMCE多图片批量上传（Ajax）教程
需要用上插件:axupimgs 插件作者:莫若卿支持版本:5.0.4+ 支持语言:仅中文插件版本:1.6 一.axupimgs 插件作用: 这是一个tinymce多图片批量上传插件,支持拖拽文件添 ...
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪前置条件安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...

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

图片裁切，上传，自动匹配颜色。相关推荐

最新文章

热门文章