1. 首页
  2. css

CSS创建自己的模因生成器

几乎每次一个新的模因出现在我的Twitter feed中,我都会想到一个诙谐的版本。不是只有我一个人这样。模因通常是一种承认共同经历或想法的方式。在网上流传的\”这是鸽子\”模因的一个变体中,一位设计师达里尔·金恩(Daryl Ginn)开玩笑说,大多数应用程序都使用人工智能pic.twitter.com/nAHki0YFyV

-Daryl Ginn(@darylginn)2018年5月16日

几个人回复了他在推特上说了一些类似\”用这个代替这个\”的话,达里尔的说法让他们想到了其他可能的变化。像imgFlip这样的平台可以让模因的生成变得简单快捷。然而,他们只能允许这么多的定制。对于许多模因来说,创建新版本只能由具有Photoshop知识的人来完成。但不一定要这样!对于一些需要对图像上的字体文本产生更大影响的模因,可以使用htmlcanvasapi创建模因生成器。在本教程中,我们将为#saltbae模因制作一个生成器。

但是首先…

让我们看看一些有趣的交互式模因示例!

网站帕布罗。生命允许您通过更改文本和图像来创建自己的Kanye West TLOP专辑封面。

这是我的最爱之一:

数字机构R/GA创建了Straight Outta Anywhere活动,用户可以\”向世界展示他们在哪里\”用户可以通过上传自己的照片并在\”直截了当\”后填写空白来下载和分享meme。

开发者Isaac Hepworth创建了特朗普行政命令生成器。

Spotify与Migos合作创建了一系列可下载的情人节卡片,可以通过改变名字来定制。

让我们构建自己的模因生成器!

现在,教程。在一个流行的#saltbae meme版本中,salt Bae(名字叫Nusret Gökçe)不是撒盐,而是撒盐以外的东西。

加载图像

我们要做的第一件事是将原始图像加载到画布上。您可以通过以下两种方式之一加载图像:从URL加载图像,或者从使用<img>标记但隐藏在DOM中的URL加载图像。

下面是使用隐藏图像标记的方法:

<canvas>

I\"m hosting the image on Cloudinary and added the crossOrigin属性,这样我们就不会遇到任何CORS问题。

function drawImage(text) {const = canvas.getContext(\"2d\");ctx.clearRect(0, 0, canvas.width, canvas.height);const = function() {drawImage();}

我们使用canvasdrawImage函数将图像绘制到画布。它也可以用来绘制视频或图像的一部分。该方法提供了不同的方法来实现这一点。我们通过指示图像的位置、宽度和高度来绘制图像。

ctx.drawImage(img, x, y, width, height);

或者,我们可以从URL加载图像:

function loadAndDrawImage(src) {// Create an image object. (Not part of the dom)const = = src;}

现在,我们加载一个图像来替换Salt Bae正在投掷的喷洒。首先,我们使用我前面提到的一种技术加载图像,然后像处理Salt Bae base图像一样将其绘制到屏幕上。

function getRandomInt(min, max) = Math.floor(max);return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive}function drawBackgroundImage(canvas, ctx) {ctx.clearRect(0, 0, canvas.width, canvas.height);const = width / height;// Used for aspect = width / ratio;return { width, height };}function drawSalt(src, canvas, ctx) {// Create an image object. (Not part of the dom)const = src;// After the image has loaded, draw it to the = 0; i < 8; i++) {const = getRandomInt(canvas.height-300, canvas.height);const = function() {const = canvas.getContext(\"2d\");drawBackgroundImage(canvas, ctx);const>

Now we can let users sprinkle something other than sprinkles.

Uploading an image

We\"re going to add a button that triggers an image upload and includes an event listener to listen for a change.

<input>
function updateImage(file, = function() {const = canvas.getContext(\"2d\");drawBackgroundImage(canvas, ctx);const =>

URL.createObjectURL()创建一个DOMString,其中包含一个URL,表示参数中给定的对象,在本例中,该URL是上载的文件。

我们可以平衡一点小游戏,比如提供一些默认选项。我添加了一些可以用来玩的表情符号作为起点。

下载最终图像

一旦生成了新的meme,我们希望用户能够下载并共享它。这样做的典型方法是使用toDataURL方法在新选项卡中打开画布,但是用户必须右键单击才能保存该选项卡中的图像,这不是很方便。

因此,我们可以利用添加到HTML5链接中的download属性。我们创建一个链接,点击后,将download属性设置为canvas.toDataURL的结果。toDataURL()方法\"返回一个包含指定格式的图像表示的数据URI。\"

function addLink(){var=\"Download!\";link.addEventListener链接(\"点击\",函数(e)=\"盐-bae公司.png\";},>

就是这样!我们的模因生成器已经完成了。

一些很酷的链接

  • Darius Kazemi已经制作了一系列生成模因的twitter机器人。
  • Vox Media有一个名为\"模因\"的模因生成器,它是开源的。
    • 模因!

      CSS创建自己的模因生成器 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%88%9b%e5%bb%ba%e8%87%aa%e5%b7%b1%e7%9a%84%e6%a8%a1%e5%9b%a0%e7%94%9f%e6%88%90%e5%99%a8/

发表评论

您的电子邮箱地址不会被公开。