之前做手寫識別的比賽，對於畫板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();