如何用Vanilla JavaScript、Skeleton和HTML 5 Canvas构建一个Meme Generator

DebugUsery
297 阅读7分钟

用Vanilla JavaScript、Skeleton和HTML 5 Canvas构建一个Meme Generator

备忘录是一种刺激和有趣的传递信息的方式。本教程将逐步指导你如何用JavaScript构建一个简单的备忘录生成器（不涉及框架），并用CSS和Skeleton对其组件进行样式设计。

通过HTML 5 Canvas，用户将能够上传自己选择的图片和文本，以及或从网上来源的图片和文本，为广大的在线观众创建滑稽的备忘录。

先决条件

要继续学习本教程，你需要具备以下条件。

  • 一个文本编辑器。
  • 对HTML、CSS和JavaScript的基本了解。

在你的项目中添加Skeleton

Skeleton是一个独特的CSS框架，有助于设计Web应用程序。它由几个响应性强、简单明了的模板代码组成，有助于实现某些CSS功能，使样式设计更容易。Skeleton也有一些实用的类，通过它的风格化元素来提升UI的外观（例如，.button.button-primary ，代表一个没有CSS的完美风格的按钮）。有两种方法可以将Skeleton安装到你的应用程序中。

git clone https://github.com/dhg/Skeleton.git

我建议你下载该压缩文件，因为上面的命令仍在积极开发中。

在下载并解压zip文件到你的项目文件夹后，你会在你的文本编辑器中发现下面的文件结构。

skeleton-file-structure

它包含Skeleton的CSS、Normalize CSS和index.html 文件，你可以用它来启动你的应用程序。

设计备忘录生成器

这个应用程序将有三个部分。第一部分将包含input 文件元素，在这里你将选择一个你希望用于你的备忘录的特定图像。第二部分将包括顶部和底部的文本输入，以便在你的备忘录中插入你想要的单词和句子。

这一部分也将有一个create new meme 按钮，它将通过在应用程序的最后一部分显示完成的备忘录来完成一个点击事件。这里是应用程序的HTML布局的代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" content="width=content-width, initial-scale=1" />
    <link
      href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="./Skeleton-2.0.4/css/skeleton.css" />
    <link rel="stylesheet" href="./style.css" />
    <title>Meme Generator with JS</title>
  </head>
  <body>
    <div class="row" id="grid-1">
      <div class="one-half column">
        <h4 class="choose-new-image">Choose new image</h4>
      </div>
      <div class="one-half column">
        <input
          type="file"
          id="choose-image"
          class="col-md-6"
          style="cursor: pointer"
        />
      </div>
    </div>
    <div class="row" id="grid-2">
      <div class="one-half column">
        <h5>Top Meme Text</h5>
        <input
          type="text"
          id="text-above"
          style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"
        />
      </div>
      <div class="one-half column">
        <h5>Bottom Meme Text</h5>
        <input
          type="text"
          id="text-below"
          style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"
        />
      </div>
    </div>

    <div class="btn-div">
      <button id="btn">create new meme</button>
    </div>

    <div class="">
      <canvas id="canvas"></canvas>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

我们从Skeleton获得了你在一些元素上看到的row 类，以帮助在网格系统中对齐应用程序的用户界面。我们还从Skeleton获得了create new meme 按钮和输入。

为了使我们的应用程序不那么粗糙，在你的style.css 文件中添加以下样式。

@media (min-width: 400px) {
  * {
    box-sizing: border-box;
    font-family: "Nunito", sans-serif;
  }
  body {
    background-color: #000;
    border-radius: 20px;
    margin: 0 auto;
    padding-top: 2em;
  }
  #grid-1,
  #grid-2 {
    color: rgb(255, 191, 0);
    justify-content: space-around;
    font-size: 25px;
    padding-top: 1em;
    padding-left: 10em;
    padding-right: 10em;
    background-color: rgb(0, 255, 255);
    width: 90vw;
    height: 20vh;
    margin: auto;
    border-radius: 50px;
  }
  #grid-2 {
    padding-top: 0;
    margin-top: 1em;
  }
  .btn-div {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 40%;
  }
  #btn {
    margin-top: 1em;
    color: #fff;
  }
}
@media (min-width: 716px) {
  #canvas {
    width: 40vw;
    height: 50vh;
    border-radius: 20px;
  }
}

添加样式后，我们的根页面应该是这样的。

meme-generator

添加JavaScript

首先，创建一个script.js 文件。用document.querySelector(‘#elementId’) 方法将你打算处理的HTML元素调用到你的JavaScript文件中。

下面是代码。

const chooseImage = document.querySelector('#choose-image');
const textAbove = document.querySelector('#text-above');
const textBelow = document.querySelector('#text-below');
const button = document.querySelector('#btn');

将本地存储的图片导入到应用程序中

为了创建备忘录，你将需要一张图片和文本，无论是单词还是句子。为了从你的系统中获取特定的图片到应用程序中，你首先需要添加一个事件监听器，当用户选择一个新的图片时，监听一个change 事件。

这里是下面的代码。

chooseImage.addEventListener("change", () => {
  const imageDataURL = URL.createObjectURL(chooseImage.files[0]);
  image = new Image();
  image.src = imageDataURL;
});

在上面的代码中，我们通过锁定input 字段内的第一个文件，然后将其转换为数据URL（即以URL文本形式表示的图像），得到了图像URL。然后，我们将image.src 设置为imageDataURL 。chooseImage.files 被设置为索引0，代表用户在文件input 中挑选的第一个文件，这是选择的图像。

现在，我们可以继续在Canvas上显示图片。

如何在本项目中使用HTML 5 Canvas

你利用HTML5canvas 标签，在尝试在DOM中创建画布时给它一个id 。你还可以设置你想要的特定宽度和高度。

比如说。

<div class="">
    <canvas id="canvas" width=”150” height=”100”></canvas>
</div>

然后，用一个document.querySelector() 方法瞄准画布，这样你就可以在你的JavaScript文件中使用它了。

const canvas = document.querySelector('#canvas');

注意：并非所有浏览器都支持HTML 5画布。Chrome、Edge、Firefox和Safari是支持它的最流行的浏览器。

像Internet Explorer 7和8这样的浏览器与HTML 5画布不兼容，但是，你可以写一个脚本，帮助浏览器支持画布代码。

这里有一个适用于Internet Explorer的脚本。

<script src = "excanvas.js"></script>

获取元素的上下文

画布最初是空白的。它就像一个空洞，你需要用图像、文本等来填充。你可以通过使用 DOM 渲染getContext() 函数访问其渲染上下文来做到这一点。这个函数将帮助你在画布上绘制你所需要的东西（不是手动的）。getContext() 函数需要一个参数，2d ，以确保渲染的图像以2D形式出现。

下面是创建所需上下文的代码，并检查用户的浏览器是否支持它。

var canvas = document.querySelector("#canvas");
if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  // supported canvas code here
} else {
  // unsupported canvas code here
}

loadImage "函数

我们需要创建一个loadImage 函数，处理在 Canvas 上显示所选图像的问题。在loadImage 函数中，你可以用 HTML 5 Canvas 的drawImage(image, dx, dy) 方法将图像追加到画布上。

这是下面的代码。

if (canvas.getContext("2d")) {
  const loadImage = () => {
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    const width = image.width;
    const height = image.height;
    const yOffSet = height / 7;
    // load the canvas background
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(image, 0, 0);
  };
} else {
  alert("Your browser does not support this image format");
}

在上面的代码中，函数中的image 代表画布上的一个图像对象。dx 和dy 代表 Canvas 的坐标点，用于固定图像。然后，我们将 Canvas 的width 属性设置为我们图像的宽度。这样，当用户试图加载图片时，它就会采用画布的宽度，这将使应用程序的用户界面看起来更好。我们也对height 和yOffSet 。

形成图片上的文字

HTML 5画布上的文本有独特的文本格式化和样式化方法。其中一些包括。

  • textBaseline [ = value ]:这个可以帮助你设置文本的基线，无论是顶部还是底部。
  • fillText(text, x, y [, maxWidth ] ):这个属性有助于将文本填充到你用x 和y 坐标指示的特定位置。
  • font [ = value ]:这个属性帮助你设置你打算在画布上使用的文本的字体和字体大小。
  • strokeStyle/fillStyle 。我们将使用fillStyle 来设置文本主体颜色。strokeStyle 将有助于设置文本边框的颜色。当你设置这些属性时，新的值将成为你想在画布上绘制的所有形状的默认值。

下面是文本形成的代码。

if (canvas.getContext("2d")) {
  const loadImage = () => {
    // styling the meme text
    ctx.font = "Bold 40px Sans-serif";
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    // adding the top meme text
    ctx.textBaseline = "Top";
    ctx.fillText(textAbove.value, width / 3, yOffSet);
    ctx.strokeText(textAbove.value, width / 3, yOffSet);
    // adding the bottom text
    ctx.textBaseline = "Bottom";
    ctx.fillText(textBelow.value, width / 3, height - yOffSet);
    ctx.strokeText(textBelow.value, width / 3, height - yOffSet);
  };
} else {
  alert("Your browser does not support this image format");
}

显示备忘录

现在我们已经准备好了一切，我们需要做的最后一件事是在create new meme 按钮上创建一个事件监听器，在发生click 事件后调用loadImage 函数。

下面是代码。

if (canvas.getContext("2d")) {
  const loadImage = () => {
    button.addEventListener("click", loadImage);
  };
} else {
  alert("Your browser does not support this image format");
}

要使用这个应用程序，用户首先需要在本地选择一张图片，在顶部和底部的input 字段中输入文本，最后点击create new meme 按钮来创建一个新的备忘录。

下面是该应用程序的最终外观和创建的备忘录。

final-image

要获得源代码，你可以前往我的GitHub repo获得源代码。这里是部署在Netlify上的实时应用程序的链接。

总结

在本教程中，我们学习了为你的应用程序的用户界面导入和使用Skeleton的整个过程。我们还学习了如何使用HTML 5 Canvas将图像和文本固定在DOM的特定坐标点上，从而创造了一个新的备忘录。

avatar
文章
阅读
粉丝