基于HTML5 Canvas和jQuery 的画图工具的实现(2)_H5之家

在介绍 undo redo 的实现之前，要先讲一下canvas的toDataURL()方法。toDataURL()方法将canvas上所绘制的内容转换成格式png格式图片，并将图片通过base64编码，转换成形如如：data:image/png;base64,iVBORw0KGg....... 的字符串，用来表示图片数据。（PS：对此比较困惑的读者可以自行查找关于HTML 图片 BASE64 存储的相关问题，这个知识点还是很重要的）

undo redo 的原理实际上很简单，就是当每执行一次绘画，则将画板的内容转换成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 <history.length-1) { clearCanvas(); cStep++; var tempImage = new Image(); tempImage.src = history[cStep]; tempImage.onload = function () { ctx.drawImage(tempImage, 0, 0); }; } }
画板信息存为图片

代码如下：

/** * save canvas content as image */ function saveItAsImage() { var image = $("#myCanvas").get(0).toDataURL("image/png").replace("image/png", "image/octet-stream"); //locally save window.location.href=image; }

源码下载 1. 读者可以去我的GitHub jPainter项目下下载，

2. 或者直接使用git 工具：https://github.com/LuanLouis/jPainter.git

3. 或者通过下载

-----------------------------------------------------------------------------------------------------------------------------------------

本文源自，如需转载，请注明出处，谢谢！