This blog is a pixel art editor implements. please read the previous blog.
link: 1. http://enlightsolution.com/javascript/a-pixel-art-editor-how-to-create-a-canvas-draw-on-it/
2. http://enlightsolution.com/javascript/drawing-tools-in-a-pixel-art-editor/
When we’ve drawn our masterpiece, we’ll want to save it for later. So that we use this picture. We should add a button for downloading the current picture as an image file.
How to work save button?
The first step create the save button by elt() function. The elt() function get type, properties and child than finally return the DOM structure. Details elt() function please visit a previous blog, link: http://enlightsolution.com/javascript/a-pixel-art-editor-how-to-create-a-canvas-draw-on-it/
save() function call when the click save button. The component keeps track of the current picture so that it can access it when saving. The current picture get by state.picture. To create the image file, it uses a <canvas> element that it draws the picture on (at a scale of one pixel per pixel) by drawPicture() function. If you details, how to work drawPicture() function, visit previous blog, link: http://enlightsolution.com/javascript/a-pixel-art-editor-how-to-create-a-canvas-draw-on-it/
Again elt() function create another(<a>) tag. Here another tag attributes is href and download. The toDataURL method on a canvas element creates a URL. They are usually very long, but they allow us to create working links to arbitrary pictures, right here in the browser.
To actually get the browser to download the picture, we then create a link element that points at this URL and has a download attribute. The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink(href). Such links, when clicked, make the browser show a file save dialog. We add that link to the document by document.boby.appendchild(), simulate a click on it, and remove it again.
How to work load-Button?
We’ll also want to be able to load existing image files into our application and edit this image. To do that, we again define a button component.
The load button create by elt() function, similarly to save button.
startLoad() function call when the click load button. To get access to a file on the user’s computer, we need the user to select the file through a file input field. But I don’t want the load button to look like a file input field, so we create the file input when the button is clicked and then pretend that this file input itself was clicked.
Finishload() call when input field change, here change means this input remove.
If a user no file selected, no execute other code. When the user has selected a file, we can use FileReader to get access to its contents, again as a data URL. That URL can be used to create an <img> element by elt() function, but because we can’t get direct access to the pixels in such an image, we can’t create a Picture object from that. The image path get by reader.result.
We already get the image. We’ll limit the size of images to 100 by 100 pixels since anything bigger will look huge on our display and might slow down the interface. Canvas tag again create by elt() function. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context 2d.So getcontext method returns a drawing context on the canvas.
we use for drawing an image onto a canvas is the drawImage() function. context.drawImage(img,x,y), here img means specifies the image, x coordinate where to place the image on the canvas and y coordinate where to place the image on the canvas. Finally, draw in canvas. But, we do not have any color information. For that finish the work.
The data property of the object returned by getImageData is an array of color components. For every pixel in a getmageData object there are four pieces of information, which represent the red, green, blue, and alpha components of the pixel’s color. We need red, green, blue values, but not need alpha value. So we use the slice() function.
The hex() function return the hexadecimal digits. We have to make sure that each number takes up two digits, so the hex helper function calls padStart to add a leading zero when necessary. Finally, return the picture object.
