由于项目的前端需要用户手绘输入，所以我们利用Canvas控件做绘画面板，并且实现了许多功能，包括手绘笔画，清空画板，上传手绘图，下载手绘图，记录用户笔画，上传背景图。以后有时间都写到这篇博客中，今天晚上想写的一个是如何隐藏input控件。代码如下：
<div style="position: absolute; overflow: hidden; width: 1px; height: 1px; opacity: 0;">
<input class="loadCanvas" οnclick="$('#frontBgInput').click();" type="button" value="加载背景图" />
</div>
效果图如下：
下面记录一下如何加载草绘图，先在前端增加一个input控件为了让用户提供草绘图的名字（这个系统因为是内部用的）所以并没有提供上传草绘图的功能，之后应该会加入的。前端代码：
<div style="position: absolute; overflow: hidden; width: 1px; height: 1px; opacity: 0;">
<input type="file" id="frontFileInput" name="files[]" multiple="multiple" οnchange="ff.load()"/>
</div>
<input class="loadCanvas" οnclick="$('#frontFileInput').click();" type="button" value="加载草绘图" /> <br />
<input type="file">才是读入文件名的控件，而<input type="button">是为了给用户提供一个按钮，当按钮触发后调用的是<input type="file" id="frontFileInput">的click()方法，这时候再触发<οnchange="ff.load()"/>中的ff.load()方法，这里的ff是一个类名而已。这个方法的代码如下：
load: function (c) {
var frontSketchName = $('#frontFileInput').val().toString();
var img = new Image();
img.onload = function () {
var ctx = document.getElementById("test").getContext('2d');
ctx.drawImage(img, 0, 0);
var j_ctx = document.getElementById('test').getContext('2d');
var j_drawData = '';
var j_imageData = j_ctx.getImageData(0, 0, 290, 250); //获取面板图像的像素值
for (var i = 0; i < j_imageData.data.length; i += 4) {
j_drawData += j_imageData.data[i + 3];
j_drawData += ',';
}
document.getElementById("HiddenImageDa").value = j_drawData; //将像素值字符串传到后台
}
img.src = 'sketch/' + frontSketchName; //图像的路径
}