Canvas绘画功能(待补充)
来源:互联网 发布:淘宝双十一营销案例 编辑:程序博客网 时间:2024/05/22 03:53
由于项目的前端需要用户手绘输入,所以我们利用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; //图像的路径}
0 0
- Canvas绘画功能(待补充)
- canvas绘画饼状图(一)
- Canvas绘画饼状图(二)
- canvas 绘画
- 计划(待补充)
- 操作系统(待补充)
- QT视图标尺功能实现(待补充)
- HMM资源(待补充)
- linux常用命令(待补充)
- 常用路径(待补充)
- 浅谈搜索(待补充)
- 字典树(待补充)
- vector实现(待补充)
- 内部类(待补充)
- gdb调试(待)补充
- AtomicInteger原理(待补充)
- 广义表(待补充)
- moive纹理(待补充)
- 转:在VS2010下编译、调试和生成mex文件
- iPhone键盘通知与键盘定制
- 面试总结
- 设计模式-Decorator模式
- Laravel使用之旅
- Canvas绘画功能(待补充)
- centos7安装docker
- 只是一个文件节点类为了项目的数据处理
- HashMap与LinkedHashMap重要知识点
- FOJ Problem 1099 Square
- unity读取记事本文字
- c函数itoa和atoi实现
- Java聊天室搭建
- python--文件删除、判断目录存在、字符串替换