用html5的canvas生成图片并保存到后台

div#a{

width:1105px;
height:500px;
margin:0 auto;
border:0px solid;

}

<div id ="a">
<canvas id="canvas" width="1105" height="500"></canvas>
</div>
<div id="down">
<center>
<button οnclick="restuya()">清除</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button οnclick="saveTu()" id="btn">保存</button>
</center>
</div>

<script type="text/javascript"> 
document.getElementById("btn").disabled=true;
// 获取 canvas 对象  
var canvas = document.getElementById('canvas');  
// 获取绘图环境  
var ctx = canvas.getContext('2d');  


var last = null;  


// 文件对象  
var filedata = null;  


// 鼠标按下  
canvas.onmousedown = function(){ 
    // 在鼠标按下后触发鼠标移动事件  
    canvas.onmousemove = move;  
    document.getElementById("btn").disabled=false;
}  


// 鼠标抬起取消鼠标移动的事件  
canvas.onmouseup = function(){  
    canvas.onmousemove = null;    
    last = null;  
}  


// 鼠标移出画布时 移动事件也要取消。  
canvas.onmouseout = function(){  
    canvas.onmousemove = null;  
    last = null;  
}  


// 鼠标移动函数  
function move(e){  
    // console.log(e.offsetX);  
    if(last != null){  
        ctx.beginPath();  
        ctx.moveTo(last[0],last[1]);  
        ctx.lineTo(e.offsetX,e.offsetY);  
        ctx.stroke();  
    }         
    // 第一次触发这个函数，只做一件事，把当前 鼠标的 x , y 的位置记录下来  
    // 做下一次 线段的 起始点。  
    last = [e.offsetX,e.offsetY];  


}  


// 重新在画  
function restuya(){  
document.getElementById("btn").disabled=true;
    ctx.clearRect(0,0,canvas.width,canvas.height);  
    drawImg(filedata);  
    
}  


// 绘制图片  
function drawImg(filedata){  


    var readFile = new FileReader();  


    readFile.readAsDataURL(filedata);  


    // 图片读取成功  
    readFile.onload = function(){  


        var Img = new Image();  
        Img.src = this.result;  


        Img.onload = function(){  
            // 根据 图片的 宽高 来 设置canvas 宽和高   
            canvas.width = Img.width;  
            canvas.height = Img.height;  
            ctx.drawImage(Img,0,0);  
        }  
    }  
}  


function saveTu(){
var saveImage = canvas.toDataURL('image/png');
var b64 = saveImage.substring(22);


$.ajax({
url: "http://localhost:8080/jiemian/saveImg",
type:'post',
data: { pp: b64},
success:function ()  
        {  
        alert('保存成功');  
        }  
});  
}

后台部分

public class savePictureServlet extends HttpServlet{


@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
}


@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {


String imageDataUrl = req.getParameter("pp");
        BASE64Decoder decoder = new BASE64Decoder();    
        byte[] b = decoder.decodeBuffer(imageDataUrl);    
        ByteArrayInputStream bais = new ByteArrayInputStream(b);
        BufferedImage bi1 = ImageIO.read(bais);
        File w2 = new File("D://test.png");
        ImageIO.write(bi1, "png", w2);
}
}