나는 최근에 이메일 캠페인을 위해 즉석에서 동적 이미지를 생성하는 가벼운 방법을 찾는 임무를 받았습니다. 물론 우리는 타사 솔루션을 사용하여 이를 수행할 수 있지만 유료입니다. 이것들은 훌륭한 서비스이지만 개발자로서 내 필요에 맞는 나만의 서비스를 구축할 수 있는지 확인하고 싶었습니다.

그러나 캐치로

내가 스스로 설정한 몇 가지 규칙.

가벼워야 합니다

헤드리스 브라우저 없음

스크린샷 도구 없음

이미지 저장 및 제공 안 함

빨라야 함

이것이 왜 필요한가요?

이메일 개발은 가능한 측면에서 먼 길을 왔지만 이메일이 코딩되는 방식은 여전히 ​​전통적인 웹 개발보다 훨씬 뒤떨어져 있습니다. <table>가 날이 갈수록 인기를 얻고 있지만 이메일에서는 레이아웃에 여전히 <div>를 사용합니다.

보안 문제로 인해 이메일에 JavaScript와 같은 스크립트를 사용하는 것은 물론 즉시 스팸 처리될 수 있습니다. 사람과 회사는 여전히 Outlook 2010과 같은 소프트웨어를 사용하고 있으므로 특정 요소 및 레이아웃에 대한 교차 플랫폼 지원은 1달러짜리 DVD 상자만큼 지저분합니다.

일반적으로 이메일은 정적이고 지루하며 목표 시장의 관심을 끌기 어렵습니다. 그래서 우리는 이것에 대해 무엇을 할 수 있습니까?

동적으로 생성된 이미지 소개

이메일 클라이언트의 99%에서 작동하는 한 가지는 이미지입니다. 그래서 우리는 그것을 개선하는 데 집중합니다. 다이내믹한 이미지를 사용하면 훌륭한 사용자 정의 글꼴, 디자인 및 사용자 정의 애니메이션 GIF로 독자에게 이메일을 개인화하여 독자의 관심을 끌 수 있습니다.



위의 예는 배경 이미지의 사용자 정의 글꼴로 수신자의 이름을 사용하여 이메일 헤더를 개인화하는 것입니다.

건물을 짓자

요약하면 NodeJS로 간단한 Express 서버를 구축할 것입니다. 캔버스를 PNG로 내보내기 전에 node-canvas 모듈을 사용하여 원하는 것을 정확하게 그립니다.

프로젝트 초기화 및 종속성 설치

$ npm init
$ npm install express --save
$ npm install canvas --save

server.js를 만들고 필요한 종속성을 요구합니다.

글꼴 파일을 등록하는 것을 잊지 마십시오.

const express = require('express')
const { registerFont, createCanvas, loadImage } = require('canvas')
const app = express()
const port = 3000

// We need to register our font file to be used in canvas
registerFont('./fonts/Sign-Painter-Regular.ttf', { family: 'signpainter' })

app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

모두 작동하는 경우 node server로 지원을 시작하고 hello world에서 http://localhost:3000를 방문할 수 있습니다.

이미지에 대한 사용자 지정 GET 경로 만들기

이렇게 하면 캔버스에서 사용할 쿼리 매개변수를 가져와야 합니다. 우리의 경우에는 이름만 원하므로 다음과 같이 하면 됩니다.

app.get('/header', (req, res) => {

    // Grab first name from query
    let firstname = decodeURI(req.query.name)

    // Custom canvas added here
    // ...
    // ...
})

경로 내부에 캔버스 논리를 추가하십시오.

우리의 디자인에서 우리는 유일한 개인화는 이름이 될 것이라는 것을 알고 있습니다. 따라서 나머지는 말하자면 "배경 이미지"가 될 수 있습니다.

app.get('/header', (req, res) => {

    // Grab first name from query
    let firstname = decodeURI(req.query.name) + "!";

    // Define the canvas
    const width = 600 // width of the image
    const height = 474 // height of the image
    const canvas = createCanvas(width, height)
    const context = canvas.getContext('2d')

    // Define the font style
    context.textAlign = 'center'
    context.textBaseline = 'top'
    context.fillStyle = '#FFFFFF'
    context.font = "80px 'signpainter' bold";

    // Load and draw the background image first
    loadImage('./images/background.jpg').then(image => {

        // Draw the background
        context.drawImage(image, 0, 0, 600, 474)

        // Draw the text
        context.fillText(firstname, 300, 150)

        // Convert the Canvas to a buffer
        const buffer = canvas.toBuffer('image/png')

        // Set and send the response as a PNG
        res.set({ 'Content-Type': 'image/png' });
        res.send(buffer)
    })
})
})

배경 이미지와 텍스트를 그린 후 캔버스를 버퍼로 변환하고 응답을 PNG 이미지로 클라이언트에 다시 보냅니다. 이를 통해 클라이언트 측에서 동적 이미지를 로드할 수 있습니다.

이것을 실행할 시간입니다.

node server로 앱을 시작하고 http://localhost:3000/header?name=@Sudo_Overflow에서 만든 새 경로를 방문하세요.

그리고 거기 당신은 그것을 가지고

이제 이메일의 <img> 태그에 이름을 다음과 같이 병합할 수 있습니다.<img src="http://localhost:3000/header?name={{FirstName}}"> 자동으로 생성됩니다.


캔버스 사용에 대한 아이디어에 특별히 감사드립니다. 그의 기사here를 확인할 수 있습니다.

전체 프로젝트는 myGithub에서 찾을 수 있습니다.

이를 개선할 수 있는 방법을 알고 있거나 피드백이 있는 경우 댓글이나 Twitter에서 알려주세요.