如何使用jquery插件截取图片颜色调
片段代码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;
}
【如何使用jquery插件截取图片颜色调】相关文章
2. 如何使用javascript/jQuery预先加载图片
3. 如何使用jQuery或者javascript处理Cookie?
8. 如何使用 HTML5 的 Notification API
本文来源:https://www.51html5.com/a1153.html