火狐制作扩展_从HTML制作Firefox徽标

火狐制作扩展

My Firefox t-shirt is probably the best t-shirt ever made. It's brilliant: a series of HTML/JS/CSS code wrapped and colored like the Firefox logo! Surely this design was created by aliens! Nope, it was created coworker Greg Koberger. Here Greg explains how to create a colored logo from page code!

我的Firefox T恤可能是有史以来最好的T恤。 太棒了：一系列HTML / JS / CSS代码像Firefox徽标一样包装和着色！ 当然，这个设计是由外星人创造的！ 不，它是由同事Greg Koberger创建的。 格雷格(Greg)在这里说明了如何从页面代码创建彩色徽标！

When each new t-shirt means staving off laundry for yet another day, swag quickly becomes the most coveted perk at any tech company. Mozilla WebDev had pretty much everything going for it: brilliant people, interesting problems, awesome office. Everything except a t-shirt.

当每件新的T恤衫意味着要再洗一天衣服时，赃物很快就成为了任何科技公司中最令人垂涎​​的特权。 Mozilla WebDev几乎具备了所有功能：聪明的人，有趣的问题，很棒的办公室。 除了一件T恤之外的所有东西。

That had to change.

那必须改变。

The basic idea for a t-shirt design came to me pretty quickly: the Firefox logo made entirely of code. The hard part was deciding what code to actually use. WebDev collectively writes thousands of lines a day, however none of it seemed substantial enough to be forever immortalized in dye ink and tri-blend fabric.

T恤设计的基本思想很快就出现了：Firefox徽标完全由代码组成。 困难的部分是决定实际使用什么代码。 WebDev每天总共写数千行，但是似乎没有什么内容足以使它永远印在染料墨水和三元混纺织物中。

Then I had another idea. What if the code on the shirt, when typed out on a computer and run, produced itself: another Firefox logo made up of code. And this code could be run again to produce itself again, and so on.

然后我有了另一个主意。 如果衬衫上的代码在计算机上键入并运行时产生了该怎么办：另一个由代码组成的Firefox徽标。 并且可以再次运行此代码以再次产生自身，依此类推。

View Demo 观看演示

奎因 (Quines)

"A quine is a program which prints its own listing. This means that when the program is run, it must print out precisely those instructions which the programmer wrote as part of the program (including, of course, the instructions that do the printing, and the data used in the printing)." - David Madore

“程序是打印自己的清单的程序。这意味着在运行该程序时，它必须准确地打印出程序员作为程序一部分编写的那些指令(当然包括进行打印的指令，以及用于打印的数据)。” - 大卫·马多(David Madore)

My inspiration was a concept known as a quine. Unfortunately, the combination of web technologies, colored/shaped output and tiny t-shirts didn't lend itself to being a true quine, so I took a few liberties.

我的灵感来自一个被称为奎因的概念。 不幸的是，网络技术，彩色/异形输出和小巧的T恤的结合并不能使自己成为真正的家伙，所以我有了一些自由。

Real quines aren't allowed to take any input, and it's considered cheating to use a function that just copies the source code and prints it out. I did both, but it still makes for a cool t-shirt.

不允许使用真实的quines输入任何内容，并且使用仅复制源代码并将其输出的功能被认为是作弊行为。 我都做过，但是还是很酷的T恤。

Let's call it quinspiration.

我们称其为quinspiration。

这个怎么运作 (How It Works)

The premise is simple:

前提很简单：

1. Get the full source of the HTML page, using document.documentElement.outerHTML. This doesn't give you doctype, so we put it back ourselves.

   使用document.documentElement.outerHTML获取HTML页面的完整源代码。 这不会为您提供doctype，因此我们将其放回原处。

2. Load an image of the Firefox logo from my server into a <canvas> element.
   将Firefox徽标的图像从我的服务器加载到<canvas>元素中。
3. Print out the source code character by character, and match up each character with its corresponding color from the logo
   逐个字符打印源代码，并将每个字符与徽标中对应的颜色进行匹配

The full source can be found on Github (https://github.com/gkoberger/fxquine/) — or if you're up for an adventure, you can probably find a shirted Mozillian wandering around the Bay Area. I'll go over the more interesting code below, and you can see how it all fits together in the repo.

完整的源代码可以在Github(https://github.com/gkoberger/fxquine/)上找到；或者，如果您想冒险，您可能会发现一个穿着衬衣的Mozillian在海湾地区徘徊。 我将在下面浏览更有趣的代码，您可以看到它们在仓库中如何组合在一起。

从图像获取颜色 (Getting Colors From An Image)

You can get colors from an image by loading it into a <canvas> element. This also allows you to modify the image -- but for now, we just need to retrieve information.

您可以通过将图像加载到<canvas>元素中来获得颜色。 这也允许您修改图像-但就目前而言，我们只需要检索信息即可。

// Create a new image
var image = new Image();
var imageData = false;
image.crossOrigin = '';
image.src = 'http://p.gkoberger.net/firefox/firefox.png';

// When it loads, we're going to put it into a canvas element
image.onload = function () {
    var cnvs = document.createElement('canvas');
    cnvs.width = image.width;
    cnvs.height = image.height;

    document.getElementsByTagName('body')[0].appendChild(cnvs);

    // This gives the drawing methods we need.
    var ctx = cnvs.getContext('2d');
    ctx.drawImage(image, 0, 0);

    // Only some browsers support getImageData.
    try {
        imageData = ctx.getImageData(0, 0, cnvs.width, cnvs.height);
    } catch (e) {
        alert("Your browser doesn't support");
        return;
    }
};

// Returns RGBA
function getColor(x, y) {
    if (!imageData) return;

    // Weird math to get the index; just trust me on this one
    var index = (y * imageData.width + x) * 4,
        red = imageData.data[index],
        green = imageData.data[index + 1],
        blue = imageData.data[index + 2],
        alpha = imageData.data[index + 3];

    // I'm returning RGBA, since it's something we can use when writing HTML
    return "rgba(" + red + "," + green + "," + blue + "," + alpha + ");";
}

This gives us getColor(x, y), which lets us get the color for any coordinates from the image.

这给了我们getColor(x, y) ，它使我们能够从图像中获取任何坐标的颜色。

CORS (CORS)

One thing I skipped over above was the image.crossOrigin line in the code above. For security reasons, you can't get image data from images hosted on external domains. The shirt is no fun if you can't type out the code and run it yourself, so we have to work around this.

我在上面跳过的一件事是上面的代码中的image.crossOrigin行。 出于安全原因，您无法从外部域上托管的图像获取图像数据。 如果您无法键入代码并自己运行它，那么衬衫就不好玩了，因此我们必须解决此问题。

Cross-Origin Resource Sharing, or CORS, lets you allow certain resources to be accessed by external domains. First, we need to change the crossOrigin of the image we're loading in:

跨域资源共享(CORS)使您允许外部域访问某些资源。 首先，我们需要更改要加载的图像的crossOrigin ：

image.crossOrigin = '';

Then, we need to change the server to allow it. For this, we're going to put the following line in our .htaccess file:

然后，我们需要更改服务器以允许它。 为此，我们将在.htaccess文件中添加以下行：

Access-Control-Allow-Origin: *

Be careful; this will apply to all files, which could potentially have security implications. If you're going to host an image for something like this, it's probably smart to give it its own .htaccess file in its own folder/subdomain/etc.

小心; 这将适用于所有文件，这可能会带来安全隐患。 如果您要为这样的图像托管图像，则在其自己的folder/subdomain/etc.中为其提供自己的.htaccess文件可能是明智的folder/subdomain/etc.

And, if we know the domain that is requesting content, we might want to restrict it a bit more:

而且，如果我们知道请求内容的域，则可能需要对其进行更多限制：

Access-Control-Allow-Origin: http://example.com http://example2.com

CORS has been around for a while, however canvas.getContext('2d') only got support for it recently. I made the t-shirts before it landed in Firefox, so I had to wait a few months to print them. I figured making a Firefox logo out of code Firefox can't run wasn't the best move.

CORS已经存在了一段时间，但是canvas.getContext('2d')仅在最近才得到支持。 我在T恤登陆Firefox之前就制作了T恤，所以我不得不等待几个月才能打印出来。 我认为用代码制作Firefox徽标并不是Firefox不能运行的最好方法。

其余的部分 (The Rest)

From there, it's all fairly simple math. Figure out how big the image should be, calculate how many characters per row, grab the color for each letter and insert a new element for each character. When you're done, remove the canvas from the page. Here's the complete code:

从那里开始，这都是相当简单的数学运算。 找出图像应该有多大，计算每行有多少个字符，为每个字母抓住颜色，并为每个字符插入一个新元素。 完成后，从页面上删除画布。 这是完整的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mozilla WebDev</title>
    <style>
      h1{
        text-align:center;
        color:#fff;
      }
      #fox{
        font-family:Courier;
        text-align:center;
      }
      body{
        background-color:#333;
        color:#444;
      }
    </style>
  </head>
  <body id="home">
    <div id="fox"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
var text = "<!DOCTYPE html>";
  text += jQuery("html").html();
  text = text.replace(/\s*(\n\s*)+/ig, "").replace(/\s+(?= )/g, "").split("");

var image = $("<img src='firefox-big-logo.png' />"),
    span = $("<span>", {
        text: "."
    });

$("#fox").append(span);

var span_width = span.width(),
    span_height = span.height();

span.remove();

image[0].crossOrigin = "";
image.load(function () {
    var cnvs = document.createElement("canvas");
    cnvs.width = image[0].width;
    cnvs.height = image[0].height;

    $("body").append(cnvs);

    var ctx = cnvs.getContext("2d");
    ctx.drawImage(image[0], 0, 0);

    var per_box = Math.floor(((cnvs.width * cnvs.height) / text.length)),
        ratio = span_height / span_width,
        x_size = Math.sqrt(per_box / ratio),
        y_size = per_box / x_size,
        imageData;

    try {
        imageData = ctx.getImageData(0, 0, cnvs.width, cnvs.height);
    } catch (e) {
        alert("Please try Firefox 9+ or Chrome!");
    }

    getPoints(imageData);

    $(cnvs).remove();

    function getPoints(imagedata) {
        var points = [],
            i = 0,
            lastSeven = "",
            title = false;

        for (var y = 0; y < cnvs.height - 1; y += y_size) {
            var total = 0,
                row = $("<span>").css({
                    "display": "block",
                    "height": span_height
                });

            for (var x = 0; x < cnvs.width - 1; x += x_size) {
                var color = getColor(imageData, x, y),
                    character = text[i];

                if (character == "<") title = false;
                if (title) color = "#fff";
                if (!color) color = "#444";

                points.push([x, y]);
                character = text[i];
                i++;
                total++;

                $(row).append($("<span>", {
                    "style": "color:" + color,
                    "text": character
                }));
                lastSeven = (lastSeven + character).substr(-7);

                if (lastSeven == "<" + "title" + ">") title = true;
            }
            $("#fox").append(row);
        }
        return points;
    }
});

/* get the color */
function getColor(imageData, x, y) {
    var x = Math.round(x),
        y = Math.round(y),
        index = (y * imageData.width + x) * 4,
        red = imageData.data[index],
        green = imageData.data[index + 1],
        blue = imageData.data[index + 2],
        alpha = imageData.data[index + 3];

    if (red == 0 && green == 0 && blue == 0) {
        return false;
    }
    return "rgb(" + red + "," + green + "," + blue + ");";
}
    </script>
  </body>
</html>

View Demo 观看演示

Getting it on a shirt was surprisingly hard. I rendered the design using HTML, but had no good way to export it for the printers. I landed on a fairly low-tech solution: opening the HTML file in Microsoft Word, and exporting it as a PDF. Not ideal, but it worked like a charm. I think it's safe to say it's the best looking t-shirt that has passed through Microsoft Word.

很难穿上衬衫。 我使用HTML渲染了设计，但是没有好的方法可以将其导出到打印机。 我找到了一个技术含量较低的解决方案：在Microsoft Word中打开HTML文件，然后将其导出为PDF。 虽然不理想，但是却像魅力一样起作用。 我认为可以肯定地说这是通过Microsoft Word的外观最好的T恤。

And that's the story of how Mozilla WebDev came to have its own t-shirt.

这就是Mozilla WebDev如何拥有自己的T恤的故事。

翻译自: https://davidwalsh.name/firefox-html

火狐制作扩展