HTML5 画廊和颜色选择器

作品来源：http://www.script-tutorials.com/html5-canvas-image-color-picker

color selector,gallery

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1965
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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];
    });
});

编译

CSS

HTML

作品来源：http://www.script-tutorials.com/html5-canvas-image-color-picker

color selector,gallery

编辑器支持Emmet

快捷键

作品来源：http://www.script-tutorials.com/html5-canvas-image-color-picker

color selector,gallery

HTML5 3D在线画展（在线艺术展览馆）

HTML5+React.js+owl.carousel.js 幻灯片背景色自适应

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：