DEMO: http://www.oschina.net/uploads/demo/example158/
< html lang = "en" > < head > < meta charset = "utf-8" /> < title >< A title = HTML5 href = "http://www.xyhtml5.com/" >HTML5 A > canvas - Image color picker | Script Tutorials title > < link href = " |
*{ margin : 0 ; padding : 0 ; } body { background-color : #bababa ; color : #fff ; font : 14px / 1.3 Arial , sans-serif ; } footer { background-color : #212121 ; bottom : 0 ; box-shadow: 0 -1px 2px #111111 ; display : block ; height : 70px ; left : 0 ; position : fixed ; width : 100% ; z-index : 100 ; } footer h 2 { font-size : 22px ; font-weight : normal ; left : 50% ; margin-left : -400px ; padding : 22px 0 ; position : absolute ; width : 540px ; } footer a.stuts,a.stuts:visited{ border : none ; text-decoration : none ; color : #fcfcfc ; font-size : 14px ; left : 50% ; line-height : 31px ; margin : 23px 0 0 110px ; position : absolute ; top : 0 ; } footer .stuts span { font-size : 22px ; font-weight : bold ; margin-left : 5px ; } .container { color : #000 ; margin : 20px auto ; position : relative ; width : 730px ; } .column 1 { float : left ; width : 500px ; } .column 2 { float : left ; padding-left : 20px ; width : 170px ; } #panel { border : 1px #000 solid ; box-shadow: 4px 6px 6px #444444 ; cursor : crosshair ; } .column 2 > div { margin-bottom : 10px ; } #swImage { border : 1px #000 solid ; box-shadow: 2px 3px 3px #444444 ; cursor : pointer ; height : 25px ; line-height : 25px ; border-radius: 3px ; -moz-border-radius: 3px ; -webkit-border-radius: 3px ; } #swImage:hover { margin-left : 2px ; } #preview { border : 1px #000 solid ; box-shadow: 2px 3px 3px #444444 ; height : 80px ; width : 80px ; border-radius: 3px ; -moz-border-radius: 3px ; -webkit-border-radius: 3px ; } .column 2 input[type=text] { float : right ; width : 110px ; } |
var canvas; var ctx; var images = [ // predefined array of used images 'images/pic1.jpg' , 'images/pic2.jpg' , 'images/pic3.jpg' , 'images/pic4.jpg' , 'images/pic5.jpg' , 'images/pic6.jpg' , 'images/pic7.jpg' , 'images/pic8.jpg' , 'images/pic9.jpg' , 'images/pic10.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]; }); }); |
本文由HTM5L中国网站小编整理转发,转载请注明出处。
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com