HTML5 uses Canvas as an online drawing program (supports saving the Canvas as an image)

Source: Internet
Author: User
Tags base64 imagecopy

1, the development of online drawing board
(1) After the page is loaded, we get the <canvas> object and add some processing functions for it to handle JavaScript events caused by different mouse actions: onmousedown, onmouseup, onmouseout, OnMouseMove
(2) Two toolbars above the canvas to select the stroke color and stroke thickness. Clicking inside the element invokes the corresponding binding method, which sets the Strokestyle property to a different color, or sets the LineWidth property to a different thickness.

The online demo is as follows:

<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>Paint</title>
<link rel= "stylesheet" href= "Paint.css" >
<script>
var canvas;
var context;

Class
Window.onload = function () {
Get canvas already drawing context
Canvas = document.getElementById ("Drawingcanvas");
Context = Canvas.getcontext ("2d");

Canvas Add mouse Event
Canvas.onmousedown = startdrawing;
Canvas.onmouseup = stopdrawing;
Canvas.onmouseout = stopdrawing;
Canvas.onmousemove = Draw;
};

Record whether the current is drawing
var isdrawing = false;

Start drawing
function Startdrawing (e) {
Isdrawing = true;
To create a new drawing path
Context.beginpath ();
Move the brush to the mouse position
Context.moveto (E.pagex-canvas.offsetleft, e.pagey-canvas.offsettop);
}

Stop drawing
function stopdrawing () {
Isdrawing = false;
}

In Paint
function Draw (e) {
if (isdrawing = = True) {
Find the latest location of the mouse
var x = E.pagex-canvas.offsetleft;
var y = e.pagey-canvas.offsettop;
Draw a straight line to the latest position of the mouse
Context.lineto (x, y);
Context.stroke ();
}
}

To save the brush element label for the previously selected color
var previouscolorelement;

Change the color of a brush
function ChangeColor (color, imgelement) {
Context.strokestyle = color;
Sets the element label for the current brush to the selected style
Imgelement.classname = "Selected";
Restores the element label of the previous brush to the default style
if (previouscolorelement!= null) Previouscolorelement.classname = "";
Previouscolorelement = imgelement;
}

The brush element label for the thickness you selected before
var previousthicknesselement;

Change brush thickness
function changethickness (thickness, imgelement) {
Context.linewidth = thickness;
Sets the element label for the current brush to the selected style
Imgelement.classname = "Selected";
Restores the element label of the previous brush to the default style
if (previousthicknesselement!= null) Previousthicknesselement.classname = "";
Previousthicknesselement = imgelement;
}

Clear Canvas
function Clearcanvas () {
Context.clearrect (0, 0, canvas.width, canvas.height);
}

Save Canvas
function Savecanvas () {
Find the element label for the preview
var imagecopy = document.getElementById ("savedimagecopy");
Display the canvas contents in an IMG element
IMAGECOPY.SRC = Canvas.todataurl ();
Show tips for saving right key
var Imagecontainer = document.getElementById ("Savedcopycontainer");
ImageContainer.style.display = "block";
}
</script>

<body>
<div class= "Toolbar" >
-Color-<br>



</div>
<div class= "Toolbar" >
-Thickness-<br>



</div>
<div class= "Canvascontainer" >
<canvas id= "Drawingcanvas" width= "height=" ></canvas>
</div>
<div class= "Toolbar" >
-Operation-<br>
<button onclick= "Savecanvas ()" > Save Image </button>
<button onclick= "Clearcanvas ()" > Clear Image </button>
<div id= "Savedcopycontainer" >
<br>
Use the right key to save the image ...
</div>
</div>
</body>

---paint.css---

Body {
Background:white;
}

. Toolbar {
Float:left;
font-family: ' Trebuchet MS ';
font-size:14px;
Font-variant:small-caps;
Text-align:center;
Background: #F2F7FE;
padding:10px 15px 3px 10px;
margin-bottom:1px;
margin-right:1px;
border:1px solid #7B899B;
}

. Toolbar button {
padding:6px;
MARGIN:7PX 2px;
Font-variant:normal;
font-size:12px;
}

. Canvascontainer {
Clear:both;
}

Canvas {
border:1px solid #7B899B;
}

IMG {
padding:2px;
border:2px solid #F2F7FE;
}

Img:hover {
BORDER:2PX Groove #E4F0FE;
Background:white;
}


Img. Selected {
BORDER:2PX Groove #E4F0FE;
}

#savedCopyContainer {
Display:none;
}

#savedCopyContainer img {
width:250px;
height:125px;
}


2, save the canvas as an image

(1) Invoking the <canvas> Todataurl () method, the canvas image data can be converted to a character sequence and encoded as a data URL.
1
var url = canvas.todataurl ();
(2) Todataurl () method if no arguments are provided, the resulting will be a PNG picture. If you want a picture in another format, you can pass in the appropriate MIME type.
1
var url = canvas.todataurl ("Image/jpeg");
(3) The data URL is a base-64 encoded string that begins with Data:image/png;base64.
data:image/png;base64,ivborw0kggoaaaansuheugaaaa0aaaancayaaaby6% 2br8aaaaleleqvr42owqqrheiaxf10elvaisvgo3bcabcuhyczwahepaqpod6bzjhnndo0dyya8fexkppxyvcplvidufyqviqn9jfmy637hrlcysfaul21e7k vwbaigx56rnslqc5kpxslo3kysalphtygfhrdtfc09eismezjsgbj7qveh3ojw89syimih%2bio2bojx0xwa2% 2bqel4pahsx4abqaaaabjru5erkjggg%3d%3d

(4) The data URL is very suitable for transmission of images, in addition to the Web server can be sent to save in the background, can also be used as a element src attribute value displayed.


Find the element label for the preview
var imagecopy = document.getElementById ("savedimagecopy");
Display the canvas contents in an IMG element
IMAGECOPY.SRC = Canvas.todataurl ();

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.