Home > Developer > Web Develop
HTML5 Canvas Doodle Board, can load pictures to doodle, also can download
PHP used by the server
The uploaded image cannot be more than 1M and can only be in JPG or PNG format.
Demo address of the server speed is not good, read the file may be very slow, reached 100% when the click to read the file, if not shown on a few more points
? 1. [Code] Main Page
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Graffiti </title>
<script type= "Text/javascript" src= "Jquery-1.8.3.js" ></script>
<script type= "Text/javascript" src= "Jquery.form.js" ></script>
<link href= "Index.css" rel= "stylesheet" type= "Text/css" >
<body>
<div id= "Choosecolor" ></div>
<div id= "Choosesize" ></div>
<div id= "Paint" >
<canvas id= "pad" width= "height="/>
</div>
<input type= "button" id= "Download" value= "Download"/>
<!--upload Pictures--
<input type= "File" Name= "Mypic" id= "Choosefile"/>
<input type= "button" value= "Read file" id= "Load"/>
<!--progress Bar--
<div class= "Progress" >
<span class= "Bar" ></span><span class= "percent" >0%</span >
</div>
<!--hidden areas--
</body>
<script type= "Text/javascript" src= "Index.js" ></script>
2. Simple typesetting of the [Code] page
Body,input {
font-size:9pt;
}
#paint, #chooseSize {
Clear:both;
}
. option {
Float:left;
width:20px;
height:20px;
border:2px solid #cccccc;
margin-right:4px;
margin-bottom:4px;
}
. Active {
BORDER:2PX solid black;
}
. LW {
Text-align:center;
Vertical-align:middle;
}
Img.output {
border:1px solid Green;
}
#pad {
border:2px solid Gray;
Cursor:arrow;
}
#chooseFile {
Float:left;
width:140px;
}
#tulip {
Display:none;
}
#download {
margin-left:550px;
}
#load {
Float:left;
width:80px;
}
3. [code] draw, upload, download processing
$ (document). Ready (function () {
Paint ();
Downloadpic ();
Loadimg ();
Uploadimg ();
});
/**
* Painting
*/
function Paint () {
Choosecolor ();
Choosesize ();
Canvas ();
}
/**
* Color Picker
*/
function Choosecolor () {
var colors = "Red;orange;yellow;green;blue;indigo;purple;black;white". Split (';');
var sb = [];
$.each (Colors,function (i,v) {
Sb.push ("<div class= ' option ' style= ' background-color:" + V + "' ></div>");
});
$ ("#chooseColor"). HTML (sb.join ("\ n"));
}
/**
* Size Selector
*/
function Choosesize () {
SB = [];
for (var i = 1; I <= 9; i++) Sb.push ("<div class= ' option LW ' >" + "<div style= ' margin-top: #px; Margin-left: #px; w Idth:%px;height:%px ' ></div></div> '. Replace (/%/g, i). replace (/#/g, 10-i/2));
$ ("#chooseSize"). HTML (sb.join (' \ n '));
}
/**
* Drawing
*/
function canvas () {
var $clrs = $ ("#chooseColor. Option");
var $LWS = $ ("#chooseSize. Option");
$clrs. Click (function () {
$clrs. Removeclass ("active");
$ (this). AddClass ("active");
P_color = This.style.backgroundColor;
$lws. Children ("div"). CSS ("Background-color", P_color);
}). First (). click ();
Click the line weight option to toggle focus and make width deposit p_width
$LWS. Click (function () {
$lws. Removeclass ("active");
$ (this). AddClass ("active");
P_width = $ (this). Children ("div"). CSS ("width"). Replace ("px", "");
}). EQ (3). Click ();
Get Canvas context
var $canvas = $ ("#pad");
var ctx = $canvas [0].getcontext ("2d");
Ctx.linecap = "Round";
Ctx.fillstyle = "White"; The entire canvas is painted with a white background to avoid PNG's transparent undertone effect
Ctx.fillrect (0,0, $canvas. Width (), $canvas. Height ());
var drawmode = false;
Canvas click, move, and release the key when you draw the action
$canvas. MouseDown (function (e) {
Ctx.beginpath ();
Ctx.strokestyle = P_color;
Ctx.linewidth = P_width;
Ctx.moveto (e.pagex-$canvas. Position (). Left, e.pagey-$canvas. Position (). top);
DrawMode = true;
}). MouseMove (function (e) {
if (DrawMode) {
Ctx.lineto (e.pagex-$canvas. Position (). Left, e.pagey-$canvas. Position (). top);
Ctx.stroke ();
}
}). MouseUp (function (e) {
DrawMode = false;
});
}
/**
* Download the currently drawn image
*/
function Downloadpic () {
Convert a diagram to a PNG file using Todataurl ()
var saveFile = function (data, filename) {
var save_link = document.createelementns (' http://www.w3.org/1999/xhtml ', ' a ');
Save_link.href = data;
Save_link.download = filename;
var event = document.createevent (' mouseevents ');
Event.initmouseevent (' Click ', True, false, window, 0, 0, 0, 0, 0, False, False, False, FALSE, 0, NULL);
Save_link.dispatchevent (event); Wedding photography
};http://www.huiyi8.com/hunsha/?
$ ("#download"). Click (function () {
var MyCanvas = document.getElementById ("pad");
var image = Mycanvas.todataurl ("Image/png"). Replace ("Image/png", "Image/octet-stream");
Window.location.href=image;
var filename = ' Paint_ ' + (new Date ()). GetTime () + '. png ';
SaveFile (image, filename);
});
}
Gets the current file name
function Ch_ (URL) {
Url=url.split ("\ \");//Escape here
var filename = url[url.length-1];
return filename;
}
Load a picture in a hidden module
function loadimg () {
$ (' #load '). Click (function () {
Loading to Canvas
var c= document.getelementbyid ("pad");
var ctx = C.getcontext ("2d");
var Img=document.getelementbyid ("Tulip");
Ctx.drawimage (img,0,0);
});
}
/**
* Upload Images
*/
function uploadimg () {
var bar = $ ('. Bar ');
var percent = $ ('. percent ');
var showimg = $ (' #showimg ');
var progress = $ (". Progress");
$ ("#chooseFile"). Wrap ("<form id= ' myupload ' action= ' upload.php ' method= ' post ' enctype= ' Multipart/form-data ' > </form> ");
$ ("#chooseFile"). Change (function () {
$ ("#myupload"). Ajaxsubmit ({
DataType: ' JSON ',
Uploadprogress:function (event, Position, total, PercentComplete) {
var percentval = percentcomplete + '% ';
Bar.width (Percentval);
Percent.html (Percentval);
},
Success:function (data) {
Alert (' upload successful ');
var file = $ (' #chooseFile '). Val ();
var filename = ch_ (file);
var src = ' paint/' + filename;
$ (' #tulip '). attr (' src ', src);
},
Error:function (XHR) {
Alert (' upload failed ');
}
});
});
}
4. [Code] server upload Processing
<?php
$picname = $_files [' mypic '] [' name '];
$picsize = $_files [' mypic '] [' size '];
if ($picname! = ") {
if ($picsize > 1024000) {
The size of the echo ' picture cannot exceed 1M ';
Exit ();
}
$type = Strstr ($picname, '. ');
if ($type! = '. jpg ' && $type! = '. png ') {
echo ' picture is not in the wrong format ';
Exit ();
}
$pics = $picname;
Upload path
$pic _path = ' paint/'. $pics;
Move_uploaded_file ($_files [' mypic '] [' tmp_name '], $pic _path);
}
$size = Round ($picsize/1024, 2);
$arr = Array (
' Name ' = $picname,
' Pic ' = $pics,
' Size ' = $size
);
echo Json_encode ($arr);
?>
?
HTML5 Canvas Doodle Artboard
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
