Question

我最近收到了一封来自Onnit Labs的电子邮件，其中包括使用gif图像在电子邮件内部的倒计时模块计时器。可以在此处查看电子邮件：https://www.onnit.com/emails/lastchance-historic/

图片可以在这里看到：

我调查了它，似乎你可以继续使用gifsockets向动画GIF发送新帧，因为GIF没有指定在浏览器中加载时有多少帧。这是在github：http://github.com/videlalvaro/gifsockets

我认为这非常有趣，确实很酷。有没有人对如何实现这一点有任何其他见解？似乎他们在Onnit上使用的那个似乎根据附加在URL或图像末尾的日期来改变倒计时。

onnit.com/emails/_modules/timer/?end=2012-12-27+00:00:00&dark=1

我正在尝试通过电子邮件发送相同的内容，但我有点难过。

Answer 1

虽然gifsockets可能会工作（我之前没有尝试过......），但是在查看初始图像加载以外的图像时没有网络流量。我也看到它再次从41跳到42。重新加载将其降至39。

它似乎只是一个生成60帧动画并将它们发送给用户的脚本。这可能是用任何语言完成的。

以下是如何在php中完成的：

http://seanja.com/secret/countdown/

enter image description here

Answer 2

我发现http://sendtric.com/是免费的，很容易整合。

Answer 3

我非常感谢Sean Ja的回答。（他值得更多的投票。）然后，我想使代码更具可读性和可配置性（并在透明gif上支持文本并自动将文本居中）：

use Carbon\Carbon;
class CountdownGifHelper {

    const DELAY = 100; /* Why was this labeled as 'milliseconds' when it seems like a value of 100 here causes 1 frame to be shown per second? */
    const MAX_FRAMES = 120;

    /**
     * 
     * @param string $bgImg
     * @param \DateInterval $interval
     * @param array $fontArr
     * @param array $frames
     * @param array $delays
     * @param string $format
     */
    public function addFrame($bgImg, $interval, $fontArr, &$frames, &$delays, $format) {
        $image = imagecreatefrompng($bgImg); //Each frame needs to start by creating a new image because otherwise the new numbers would draw on top of old ones. Here, it doesn't really matter what the PNG is (other than for size) because it's about to get filled with a new color.
        $text = $interval->format($format);
        ob_start();
        imageSaveAlpha($image, true);
        $backgroundColor = $fontArr['backgroundColor'];
        imagefill($image, 0, 0, $backgroundColor); //https://stackoverflow.com/a/17016252/470749 was a helpful hint
        imagecolortransparent($image, $backgroundColor);
        $this->insertCenteredText($image, $fontArr, $text);
        //imagettftext($image, $font['size'], $font['angle'], $font['x-offset'], $font['y-offset'], $font['color'], $font['file'], $text);//this was the old way
        imagegif($image); //The image format will be GIF87a unless the image has been made transparent with imagecolortransparent(), in which case the image format will be GIF89a.
        $frames[] = ob_get_contents();
        ob_end_clean();
        $delays[] = self::DELAY;
    }

    /**
     * 
     * @param resource $image
     * @param array $fontArray
     * @param string $text
     */
    public function insertCenteredText(&$image, $fontArray, $text) {
        $image_width = imagesx($image);
        $image_height = imagesy($image);
        $text_box = imagettfbbox($fontArray['size'], $fontArray['angle'], $fontArray['file'], $text); // Get Bounding Box Size
        $text_width = $text_box[2] - $text_box[0];
        $text_height = $text_box[7] - $text_box[1];
        // Calculate coordinates of the text https://stackoverflow.com/a/14517450/470749
        $x = ($image_width / 2) - ($text_width / 2);
        $y = ($image_height / 2) - ($text_height / 2);
        imagettftext($image, $fontArray['size'], $fontArray['angle'], $x, $y, $fontArray['color'], $fontArray['file'], $text);
    }

    /**
     * 
     * @param int $timestamp
     * @param string $bgImg
     * @param array $fontArray
     * @return string [can be used by Laravel response()->make($gifString, 200, $headers)]
     */
    public function getAnimatedGif($timestamp, $bgImg, $fontArray) {
        $future_date = Carbon::createFromTimestamp($timestamp);
        $time_now = time();
        $moment = new \DateTime(date('r', $time_now));
        $frames = [];
        $delays = [];
        for ($i = 0; $i <= self::MAX_FRAMES; $i++) {
            $interval = date_diff($future_date, $moment);
            if ($future_date < $moment) {
                $this->addFrame($bgImg, $interval, $fontArray, $frames, $delays, '00 : 00 : 00');
                $loops = 1; //stay stuck on this frame
                break;
            } else {
                $this->addFrame($bgImg, $interval, $fontArray, $frames, $delays, '%H : %I : %S');
                $loops = 0; //infinite loop
            }
            $moment->modify('+1 second');
        }
        $animatedGif = new \App\Helpers\AnimatedGif($frames, $delays, $loops, 0, 0, 0);
        return $animatedGif->getAnimation();
    }

    /**
     * ONEDAY allow config via params
     * @param resource $image
     * @return array
     */
    public function getFontArray($image) {
        $fontArr = [
            'file' => resource_path('assets/fonts/Kanit-Regular.ttf'),
            'size' => 30,
            //'x-offset' => 5,
            //'y-offset' => 30,
            'color' => imagecolorallocate($image, 90, 90, 90), //gray
            'backgroundColor' => imagecolorallocate($image, 0, 0, 0), //white. Must match the arguments provided to AnimatedGif (such as 0,0,0).
            'angle' => 0,
        ];
        return $fontArr;
    }

}

Answer 4

您可以尝试http://makedreamprofits.com/pt/。这个倒计时不是为gif提供额外的内容，而是分成单独的图像，最多可以计算20分钟而不增加流量。

P.S。 Gmail正在预先处理图像，因此无法为其提供新的帧。

电子邮件中的倒数计时器图像GIF

4 个答案: