HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

如何使用jquery插件截取图片颜色调

2013-4-22 11:32| 发布者: html5cn| 查看: 21537| 评论: 0|原作者: 陈佳琪|来自: oschina

摘要: 今天很高兴的跟大家介绍一款jquery插件,使用它可以很方便的抽取你所提供的任意一张图片上的主色调颜色,以及其他全部颜色组成代码。注:此代码使用html5代码,请在火狐等高版本浏览器下运行才兼容。 ...
      
     今天很高兴的跟大家介绍一款jquery插件,使用它可以很方便的抽取你所提供的任意一张图片上的主色调颜色,以及其他全部颜色组成代码。注:此代码使用html5代码,请在火狐等高版本浏览器下运行才兼容。

片段代码3:


[代码] [javascript]代码

var CanvasImage = function(image){

// If jquery object is passed in, get html element

this.imgEl = (image.jquery)? image[0]: image;


this.canvas = document.createElement('canvas'),

    this.context = this.canvas.getContext('2d');


document.body.appendChild(this.canvas);


this.width = this.canvas.width = $(this.imgEl).width(),

this.height = this.canvas.height = $(this.imgEl).height();


this.context.drawImage(this.imgEl, 0, 0);

}


CanvasImage.prototype.clear = function() {

this.context.clearRect(0, 0, this.width, this.height);  

}


CanvasImage.prototype.update = function(imageData) {

this.context.putImageData(imageData, 0, 0);

}


CanvasImage.prototype.getPixelCount = function() {

return this.width * this.height;

}


CanvasImage.prototype.getImageData = function() {

return this.context.getImageData(0, 0, this.width, this.height);

}


CanvasImage.prototype.removeCanvas = function() {

$(this.canvas).remove();

}



/*

 * getDominantColor(sourceImage)

 * returns {r: num, g: num, b: num}

 *

 * Use the median cut algorithm provided by quantize.js to cluster similar

 * colors and return the base color from the largest cluster.

*/

function getDominantColor(sourceImage){


var palette = [];


// Create custom CanvasImage object

var image = new CanvasImage(sourceImage),

imageData = image.getImageData(),

pixels = imageData.data,

pixelCount = image.getPixelCount();

 

// Store the RGB values in an array format suitable for quantize function

var pixelArray = [];

for (var i = 0; i < pixelCount; i++) {  

// If pixel is mostly opaque and not white

if(pixels[i*4+3] >= 125){

if(!(pixels[i*4] > 250 && pixels[i*4+1] > 250 && pixels[i*4+2] > 250)){

  pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);

}

}

};


// Send array to quantize function which clusters values

// using median cut algorithm

var cmap = MMCQ.quantize(pixelArray, 5);

var newPalette = cmap.palette();


// Clean up

image.removeCanvas();

return {r: newPalette[0][0], g: newPalette[0][1], b: newPalette[0][2]};

}




/*

 * createPalette(sourceImage, colorCount)

 * returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]

 *

 * Use the median cut algorithm provided by quantize.js to cluster similar

 * colors.

 *

 * BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.

*/

function createPalette(sourceImage, colorCount){


var palette = [];


// Create custom CanvasImage object

var image = new CanvasImage(sourceImage),

imageData = image.getImageData(),

pixels = imageData.data,

pixelCount = image.getPixelCount();

 

// Store the RGB values in an array format suitable for quantize function

var pixelArray = [];

for (var i = 0; i < pixelCount; i++) {  

// If pixel is mostly opaque and not white

if(pixels[i*4+3] >= 125){

if(!(pixels[i*4] > 250 && pixels[i*4+1] > 250 && pixels[i*4+2] > 250)){

    pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);

}

}

};


// Send array to quantize function which clusters values

// using median cut algorithm

var cmap = MMCQ.quantize(pixelArray, colorCount);

var newPalette = cmap.palette();


// Clean up

image.removeCanvas();


return newPalette;

}



/*

 * getAverageRGB(sourceImage)

 * returns {r: num, g: num, b: num}

 *

 * Add up all pixels RGB values and return average.

 * Tends to return muddy gray/brown color. Most likely, you'll be better

 * off using getDominantColor() instead.

*/

function getAverageRGB(sourceImage) {

// Config

var sampleSize = 10;

// Create custom CanvasImage object

var image = new CanvasImage(sourceImage),

imageData = image.getImageData(),

pixels = imageData.data,

pixelCount = image.getPixelCount();  


// Reset vars

var i = 0,

count = 0,

rgb = {r:0,g:0,b:0};


// Loop through every # pixels. (# is set in Config above via the blockSize var)

// Add all the red values together, repeat for blue and green.

// Last step, divide by the number of pixels checked to get average.

    while ( (i += sampleSize * 4) < pixelCount ) {

// if pixel is mostly opaque

if(pixels[i+3] > 125){

       ++count;

rgb.r += pixels[i];

       rgb.g += pixels[i+1];

       rgb.b += pixels[i+2];

}

    }


  rgb.r = Math.floor(rgb.r/count);

    rgb.g = Math.floor(rgb.g/count);

    rgb.b = Math.floor(rgb.b/count);


return rgb;

}



/*

 * createAreaBasedPalette(sourceImage, colorCount)

 * returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]

 *

 * Break the image into sections. Loops through pixel RGBS in the section and average color.

 * Tends to return muddy gray/brown color. You're most likely better off using createPalette().

 * 

 * BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.

 * 

*/

function createAreaBasedPalette(sourceImage, colorCount){


var palette = [];


// Create custom CanvasImage object

var image = new CanvasImage(sourceImage),

imageData = image.getImageData(),

pixels = imageData.data,

pixelCount = image.getPixelCount();  

// How big a pixel area does each palette color get

var rowCount = colCount = Math.round(Math.sqrt(colorCount)),

colWidth = Math.round(image.width / colCount),

rowHeight = Math.round(image.height / rowCount);

var count = offset = rowOffset = vertOffset = horizOffset = 0,

rgb = {r:0,g:0,b:0};


// Loop through pixels section by section.

// At the end of each section, push the average rgb color to palette array.

for(var i=0; i<rowCount; i++){

vertOffset = i * rowHeight * image.width * 4;

for(var j=0; j<colCount; j++){

horizOffset = j * colWidth * 4;

for( var k = 0; k < rowHeight; k++){

rowOffset = k * image.width * 4;

for( var l = 0; l < colWidth; l++){

offset = vertOffset + horizOffset + rowOffset + (l * 4);

   rgb.r += pixels[offset];

       rgb.g += pixels[offset+1];

       rgb.b += pixels[offset+2];

count++;

}

}

rgb.r = Math.floor(rgb.r/count);

   rgb.g = Math.floor(rgb.g/count);

   rgb.b = Math.floor(rgb.b/count);

palette.push(rgb);


// reset before next section

rgb = {r:0,g:0,b:0};

count = 0;

}

}

return palette;

}


更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-29 17:53

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部