将 Canvas 集成到您的 Web 应用程序中

发布于 2023-01-31 22:30:25 字数 7994 浏览 119 评论 0

在本文中，我将讨论如何使用 HTML5 canvas 元素创建、编辑、打开和导出图像。我还将介绍几个与该技术相关的开源工具，并提供一些有关如何将这些技术应用于现有 Web 应用程序的提示。

检查画布支持

首先要做的是检查您的浏览器是否完全支持 HTML5 canvas。一种简单的方法是使用 Modernizr 检查某个功能：

if (Modernizr.canvas) {
  // Browser supports native HTML5 canvas.
} else {
  // Fallback to another solution, such as Flash, static image, download link, and so on.
}

创建画布元素并将图像导入为二进制或数据 URI

首先，您需要在页面中有一个画布元素。

使用 JavaScript，您可以执行以下操作：

var ctx = document.getElementById('new_canvas').getContext('2d');
var img = new Image();
img.src = "html5.gif"
img.onload = function () {
   ctx.drawImage(img,0,0);
}

这是画布元素上的结果（使用开发人员工具检查源代码）。

在此代码中，第一步是获取 2D 上下文，这使我们能够访问的API 定义所有绘图方法和属性。接下来，我们创建一个图像对象并将 src 属性设置为二进制图像的位置。加载图像后，我们使用 drawImage() 方法将图像导入 canvas 元素。

您还可以使用数据 URI 代替图像的 URL。因此，您可以执行以下操作，而不是上面的 URL：

img.src="data:image/gif;base64,R0lGODlhyAD3APcAAAAAAAoKChISEhsbGyAcHSMjIyomJysrKzMvMDMzMzk2Nzw8PEJC…"

您可能会问，“为什么我们要使用数据 URI 而不是二进制图像？” 有很多优点。在本文的后面，您将看到我们如何轻松地将画布图像导出为数据 URI。

这是一个将二进制图像文件转换为数据 URI 的工具

操纵画布图像

如果您曾经做过任何类型的徽标编程，那么在画布上绘图会使用相同的概念。

Mark Pilgrim 有一章是关于画布在他的书 Dive Into HTML5 中的。基于本章中的示例，我们可以使用以下命令将网格图添加到我们在上面导入的图像中：

var img2 = new Image();
img2.onload = function () {
  var context2 = document.getElementById('new_canvas2').getContext('2d');
  /* vertical lines then horizontal ones */
  for (var x = 0.5; x < 800; x += 10) { context2.moveTo(x, 0); context2.lineTo(x, 500); } 
  for (var y = 0.5; y < 500; y += 10) { context2.moveTo(0, y); context2.lineTo(800, y); }
  context2.strokeStyle = "#bbb";
  context2.stroke();
  context2.drawImage(img2,0,0);
}
img2.src = "html5.gif";

结果如下所示：

您可以比这更有创意，但我将其留给本文附录中列出的其他教程，以获取有关该主题的更多说明。

我们还没有看到任何令人兴奋的东西，但下一节将改变这一点……

将画布图像导出为数据 URI

画布元素有一个 toDataURL()方法，它将 MIME 类型作为参数。有了这个，我们可以导出我们上面使用的画布。

window.open(document.getElementById('ctx').toDataURL("image/png"));

这会将画布作为 PNG 图像导出到新的浏览器窗口中。但是，图像不是普通的二进制图像，而是可以由浏览器呈现的 base64 编码数据 URI。因此，从用户的角度来看，它与二进制等价物之间没有区别。

请注意，上面的代码行需要在 Web 服务器上运行。跑步 toDataURL()在本地文件上会失败。请参阅此票证以了解此问题在 Chrome 中的状态。

集成到您的网络应用程序中

Canvas 可以成为任何存储用户上传图像的 Web 应用程序的非常强大的附加组件。

例如，我们有一个在线文件存储应用程序，用于存储用户上传的图像。我们可以添加一个编辑按钮来在基于画布的图片编辑器中打开图像文件。

如果您不想编写自己的画布编辑器， Harmony 是为数不多的公开可用的画布编辑器之一。它具有易于添加画笔的功能，可以满足您的艺术品味。

当您在上面所示的菜单中选择“编辑图像”时，画布编辑器应该打开，它会调用自定义 read_file()编辑器的init()函数中的函数如下：

function read_file() {
   var url = file_id;
   // hide a copy of the original image if it is needed to load
   document.getElementById('editableImage').src = url; 
   image = new Image();
   image.src = url;
   image.onload = function() {
      context.drawImage(image,0,0); // context, defined above, as canvas.getContext('2d')
   }
}

添加 HTML5 LocalStorage

如果您关心用户体验，您应该始终考虑的一点改进是应用 LocalStorage。例如，如果您有一个大文本区域，需要用户输入大量信息。当用户准备提交表单时，他不小心关闭了浏览器（或浏览器崩溃）。用户可能会感到沮丧，不会费心再次重写消息。

在下面的演示中，不是将数据保存到服务器，而是将图像作为数据 URI 保存到 LocalStorage：

// Save Image
function saveToLocalStorage() {
    localStorage.setItem('canvas', canvas.toDataURL('image/png'));
}

// Load Image
function init() {
        // for demo purpose, all variables are declared in the parent scope
        canvas = document.createElement('canvas');
        context = canvas.getContext('2d');

        // Use Modernizr to detect whether localstorage is supported by the browser
        if (Modernizr.localstorage && localStorage.getItem('canvas'))
        {
            localStorageImage = new Image();
            localStorageImage.addEventListener("load", function (event) {
                //...
                context.drawImage(localStorageImage, 0, 0);
            }, false);
            localStorageImage.src = localStorage.getItem('canvas');
        }
//...
}

Harmony 演示 - 将您的签名放在这里，它将使用 LocalStorage 存储在本地。这意味着即使在页面刷新之后，您在下方画布中绘制的内容仍将保留。

将画布作为二进制文件保存到服务器上

您可能希望将画布图像保存为二进制文件。有很多方法可以做到这一点。例如，您可以执行 POST 操作以将数据 URI 传递给您的后端代码。使用 jQuery，它看起来像这样：

var url = '/api/write/' + file_id + '?data_url_to_binary=1';
var data_url = flattenCanvas.toDataURL('image/png');
var params = { contents: data_url };

$j.post(url, params, function(json){
   if (json.status == 'upload_ok')
   {
      //ok
   }
}, 'json');

这将创建一个 XHR 调用，其内容是数据 URI。

然后您需要在服务器上解码 base64 数据 URI。在 PHP中，您可以执行以下操作：例如，

if ($_GET['data_url_to_binary'])
{
   $contents_split = explode(',', $contents);
   $encoded = $contents_split[count($contents_split)-1];
   $decoded = "";
   for ($i=0; $i < ceil(strlen($encoded)/256); $i++) {
      $decoded = $decoded . base64_decode(substr($encoded,$i*256,256)); 
   }
   $contents = $decoded; // output
}

在前两行中，数据 URI ($contents) 被分成两部分。 'data:image/png;base64'，和 'VBORw0KGgoAAAANSUhEUgAAAWwAAAB+CAIAAACPlLzKAAAACXBIWXMAAC4jAAAuIwF4pT92...'然后我们将使用 base64_decode()解码数据 URI 字符串。这里的诀窍是解码大于 5K 的字符串存在问题，而这种“分而治之”的方法将能够解码字符串。

最后，使用 fwrite()，您可以将二进制文件 $contents 保存到您的服务器上。