Canvas输出图片并保存到本地

之前做手写识别的比赛，对于画板canvas写出的数字，要生成图片保存到本地，然后调用python进行识别。对图片保存经历了三个版本变更。

---

一、直接对屏幕进行截屏保存图片

仅停留在可以实现生成图片，图片的画质还有截取的位置都有很大的问题

Robot robot;
try {
	robot = new Robot();

    //进行屏幕截取，根据不同电脑的分辨率设置参数
	BufferedImage bi = robot.createScreenCapture(new Rectangle(740,294,440,386));


	FileOutputStream out1 = new FileOutputStream("F:\\webproject\\image\\image1.png");
	JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out1);
	encoder.encode(bi);
	out1.close();


} catch (IOException e) {
	e.printStackTrace();
} catch (AWTException e) {
	e.printStackTrace();
}

二、利用canvas2image.js脚本

前端用js封装，调用canvas2image.js脚本（github可以下到的）中的方法，缺点是只能保存到电脑c盘中的downloads文件夹中，如果要布置到服务器上，依然是下在自己的电脑上。如果不布置到服务器上，这个方法就很简单了。

<script type="text/javascript">
    // 点击转成图片
    function savePic() {
        var oCanvas = document.getElementById("canvas");
        Canvas2Image.saveAsImage(oCanvas,420,420,"png","image1");        
    }
</script>

三、通过前后台传值base64进行本地保存

都知道canvas能生成base64编码的图片，这里通过最简单的表单传值，将base64传到后台，后台进行保存。画质很高清，在服务器上也是可以的。唯一的缺点就是前端有个input框框就很难看，没办法，毕竟button不能传value。可以通过ajax、php啥的对数据交互进行升级。

<form id="form1" method="post">
     <div class="mnist-pad-actions">
         <input type="button">
         <input type="button" onclick="submits();">
     </div>
     <input type="text" name="base64" id="base64">
</form>
<script type="text/javascript">

    // 点击将base64传到后台
    function savePic() {
        var oCanvas = document.getElementById("canvas");
        var url = oCanvas.toDataURL();
        document.getElementById("base64").value = url.toString();

        var form = document.getElementById("form");
        form.method="post";
        form.action="single.jsp";
        form.submit();
    }
   
</script>

String data = request.getParameter("base64");
//对前端获取的base64数据进行处理
data=data.replaceFirst("data:image/png;base64,", "");

//对base64编码进行解码
BASE64Decoder decoder = new BASE64Decoder();
byte[] hhh = decoder.decodeBuffer(data);
for (int i = 0; i < hhh.length; ++i) {
    if (hhh[i] < 0) {                // 调整异常数据
        hhh[i] += 256;
    }
}

//输出保存为本地图片
String outFile = "F:\\images\\output\\image1.png";
OutputStream outs = new FileOutputStream(outFile);
outs.write(hhh);
outs.flush();
outs.close();