image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
<title>Canvas实现简易涂鸦板</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
}
canvas {
margin-top: 0px;
}
#huaban {
display: block;
position: absolute;
left: 0;
bottom: 0;
}
#result {
width: 30%;
margin: 0 auto;
}
#result img {
width: 100%;
}
</style>
</head>
<body>
<section id="huaban">
<button onclick="clearCanvas()">清空</button>
<!-- <a href="#" download="canvas_love.png" id="save_btn"> -->
<button id="save_btn">上传</button>
<!-- </a> -->
<canvas id="canvas" width="400" height="300" style="background-color: rgba(0,0,0,0.1)">
您的浏览器不支持canvas
</canvas>
</section>
<div id="result">
</div>
<script>
var saveBtn = document.getElementById('save_btn');
var canvas = document.getElementById('canvas');
canvasResize();
window.addEventListener('resize', canvasResize);
function canvasResize() {
canvas.setAttribute('width', window.innerWidth);
clearCanvas();
}
if (canvas.getContext) {
context = canvas.getContext('2d');
clearCanvas();
canvas.addEventListener('touchstart', touchstart);
canvas.addEventListener('touchmove', touchmove);
saveBtn.addEventListener('click', saveImg);
}
function touchstart(e) {
e.preventDefault();
var touches = e.changedTouches;
var x = touches[0].pageX - $(canvas).offset().left;
var y = touches[0].pageY - $(canvas).offset().top;
context.moveTo(x, y);
}
function touchmove(e) {
e.preventDefault();
var touches = e.changedTouches;
var x = touches[0].pageX - $(canvas).offset().left;
var y = touches[0].pageY - $(canvas).offset().top;
context.lineTo(x, y);
context.stroke();
}
function clearCanvas() {
if (typeof context != 'undefined') {
context.clearRect(0, 0, canvas.width, canvas.height);
context.lineWidth = 1;
context.strokeStyle = '#0000ff';
context.fillStyle = "#f0f0f0";
context.fillRect(0, 0, canvas.width, canvas.height);
context.beginPath();
}
}
function saveImg() {
var dataUrl = canvas.toDataURL("image/png");
// var openWidow = window.open("", "_blank", "width=600, height=200");
// document.write("<img src='" + dataUrl + "' />");
var img = $('<img/>');
img.attr('src', dataUrl);
$('#result').html(img)
// saveBtn.href = dataUrl;
// var image = dataUrl.replace("image/png", "image/octet-stream");
// window.location.href = image;
}
</script>
</body>
</html>
