Canvas绘画功能（待补充）

开发者志诚技术 2022年11月15日

0 收藏 705 点赞 2,202 浏览 1381 个字

由于项目的前端需要用户手绘输入，所以我们利用Canvas控件做绘画面板，并且实现了许多功能，包括手绘笔画，清空画板，上传手绘图，下载手绘图，记录用户笔画，上传背景图。以后有时间都写到这篇博客中，今天晚上想写的一个是如何隐藏input控件。代码如下：

<div style="position: absolute; overflow: hidden; width: 1px; height: 1px; opacity: 0;">
    <input class="loadCanvas" onclick="$('#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" onchange="ff.load()"/>
</div>
<input class="loadCanvas" onclick="$('#frontFileInput').click();" type="button" value="加载草绘图" /> <br />

<input type=”file”>才是读入文件名的控件，而<input type=”button”>是为了给用户提供一个按钮，当按钮触发后调用的是<input type=”file” id=”frontFileInput”>的click()方法，这时候再触发<onchange=”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; //图像的路径
}