Well, this is the part where we need to define what happens when you click somewhere in the canvas, and if you think about it, you first need to get the user’s cursor position in the canvas to see where they clicked, like so: $('#canvas_picker').click(function(event) When this image has loaded we need to draw it into the canvas: var img = new Image() When we submitted the color, the browser convert it into string form. It is an interface in which a user can select a single color from multiple collections of background colors. As we know, a color picker is also known as a color-chooser. To do this we need to create an image object and make its source the URL of the image. In this article, we will learn how to add a color picker in a form using HTML. Now that we have got the canvas element and its context, we can start by setting the image as the background of the canvas. The first thing we need to do in order to make the color picker work is to get the canvas and its context and to do that all we need is a line of code, like so: var canvas = document.getElementById('canvas_picker').getContext('2d') You should also add jQuery to your page since we will be using some jQuery code. Since we will use a background image with the color pallete I made my canvas the width and height of that image and the values for the selecetd color will appear in the inputs for easier selection. Note that if you're going to test the demo locally, you'll need to use a browser other than Chrome Chrome's security model means that the script will only work online.įor this example the HTML will be very minimal, all we need in order for the color picker to work is a canvas element and some place to show our selected color in RGB and in HEX formats, so all we need is this: You can also download the source files here. In this tutorial we are going to use the canvas element to create a simple color picker that doesn’t require any Flash, all you'll need is a text editor and a browser.īefore we start, take a look at what we'll build here. Use this FREE online html color picker tool to get the HEX, RGB, CMYK or HSL color codes from any image. Creating canvas apps is the new thing, we can even create games with it, it’s supported in all major browsers both desktop and mobile, and that makes it a more viable solution than using Flash.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |