html5 画廊,HTML5 画廊和颜色选择器

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas;

var ctx;

var images = [ // predefined array of used images

'/uploads/140922/pirate_01.jpg',

'/uploads/140922/pirate_02.jpg',

];

var iActiveImage = 0;

$(function(){

// drawing active image

var image = new Image();

image.onload = function () {

ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas

}

image.src = images[iActiveImage];

// creating canvas object

canvas = document.getElementById('panel');

ctx = canvas.getContext('2d');

$('#panel').mousemove(function(e) { // mouse move handler

var canvasOffset = $(canvas).offset();

var canvasX = Math.floor(e.pageX - canvasOffset.left);

var canvasY = Math.floor(e.pageY - canvasOffset.top);

var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);

var pixel = imageData.data;

var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";

$('#preview').css('backgroundColor', pixelColor);

});

$('#panel').click(function(e) { // mouse click handler

var canvasOffset = $(canvas).offset();

var canvasX = Math.floor(e.pageX - canvasOffset.left);

var canvasY = Math.floor(e.pageY - canvasOffset.top);

var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);

var pixel = imageData.data;

$('#rVal').val(pixel[0]);

$('#gVal').val(pixel[1]);

$('#bVal').val(pixel[2]);

$('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);

$('#rgbaVal').val(pixel[0]+','+pixel[1]+','+pixel[2]+','+pixel[3]);

var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];

$('#hexVal').val( '#' + dColor.toString(16) );

});

$('#swImage').click(function(e) { // switching images

iActiveImage++;

if (iActiveImage >= 10) iActiveImage = 0;

image.src = images[iActiveImage];

});

});