基于HTML5的在线绘图工具,基于HTML5 Canvas和jQuery 的绘图工具的实现

在介绍 undo redo 的实现之前。要先讲一下canvas的toDataURL()方法。

toDataURL()方法将canvas上所绘制的内容转换成格式png格式图片，并将图片通过base64编码。转换成形如如：data:image/png;base64,iVBORw0KGg.......的字符串，用来表示图片数据。

(PS：对此比較困惑的读者能够自行查找关于HTML

图片 BASE64 存储的相关问题，这个知识点还是非常重要的)

undo redo 的原理实际上非常easy。就是当每运行一次绘画，则将画板的内容转换成base64编码的字符串，存到缓存数组中去，然后在须要undo 的时候，将画板清空。再将缓存数组中的最后一次编辑的图片绘制到画板上就可以。相关的实现细节例如以下代码所看到的：

//undo redo

var history =new Array();

var cStep = -1;

/**

* put current canvas to cache

function historyPush()

{

cStep++;

if (cStep < history.length)

{

history.length = cStep;

}

history.push($("#myCanvas").get(0).toDataURL());

}

/**

* function: undo

function undo()

{

if (cStep >= 0)

{

cStep--;

var tempImage = new Image();

tempImage.src = history[cStep];

tempImage.onload = function () { ctx.drawImage(tempImage, 0, 0);};

}

/**

* function: redo

function redo()

{

if (cStep

{

clearCanvas();

cStep++;

var tempImage = new Image();

tempImage.src = history[cStep];

tempImage.onload = function () { ctx.drawImage(tempImage, 0, 0); };

}

基于HTML5的在线绘图工具,基于HTML5 Canvas和jQuery 的绘图工具的实现相关推荐

基于HTML5 Canvas和jQuery 的画图工具的实现
简介 HTML5 提供了强大的Canvas元素,使用Canvas并结合Javascript 可以实现一些非常强大的功能.本文就介绍一下基于HTML5 Canvas 的画图工具的实现.废话少说,先看成品 ...
基于PHP MySQL在线考试系统,基于PHP和MySQL的考试系统的研究
68 技术在线 2010年10月下第30期(总第216期) 随着考生的增加.考试要求的不断提高,对考试系统的要求越来越高,相应的教师和管理员的工作强度也越来越大,传统的考试方式已不能充分满足当前考生 ...
基于python的在线考试系统-基于 Python 的电子教室和在线考试系统源代码
Python 是近年倍受推崇的语言,这里介绍的是两个与教学相关的开源项目.一个是用于计算机教室管理的电子教室系统,第二个是与之关联的在线考试系统,当然,这个系统也可以单列出来.这两个项目还只是个雏形, ...
基于python的在线考试系统-基于Django的在线考试系统
项目目录结构: account为扩展的Django用户模块 analysis为用户答题分析模块 api为接口路由 business为机构配置信息模块 competition为比赛核心模块 config ...
html5实现在线动态画板,Javascript HTML5 Canvas实现的一个画板
DEMO6:自定义画板浏览器不支持canvas YELLOW RED BLUE GREEN WHITE BLACK 4PX 8PX 16PX EXPORT var canvas = document ...
基于html5的在线教育,基于HTML5的在线学习系统的设计与实现
基于HTML5的在线学习系统的设计与实现发布时间:2019-11-18所属分类:科技论文浏览:1次摘要: 摘要: 在线课程学习网站的发展迅速,吸引了广大用户.基于 HTML5 的在线学习系统经 ...
html5摄像头在线演示,基于HTML5实现的超酷摄像头（HTML5 webcam）摄
}); WebRTC可能是来岁最受关心的HTML5标准了,Mozilla为此开辟了一套协帮你节造软件的API,例如,摄像头,麦克风,或者是加快表.你可以或许不依赖其它的插件来调用你需要的本机软件设备. ...
基于html5的音乐网站,基于C#和HTML5的在线音乐网站设计
毕业设计是基于c#和html5的在线音乐网站设计,下载了visual studio 2017准备开发.这个软件可以写页面也可以开发后台,很方便了. 项目的创建:asp.net web,visual s ...
图片怎么转为html5,将图片转化为矢量并canvas化的容易工具(基于Node.js + HTML5 canvas)...
将图片转化为矢量并canvas化的简单工具(基于Node.js + HTML5 canvas) 一.前言最近需要做一个图标的矢量化,但是没有数据,因此采用了node.js作为数据处理工具,canva ...
html5网站测试工具,基于HTML5网页的前端技术测试技巧
51Testing软件测试网)QTQ e-c HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的的前端技术框架,它的价值在于融合CSS/javaScript/fla ...

基于HTML5的在线绘图工具,基于HTML5 Canvas和jQuery 的绘图工具的实现

基于HTML5的在线绘图工具,基于HTML5 Canvas和jQuery 的绘图工具的实现相关推荐

最新文章

热门文章