thumbnail-gen.html

<style>
canvas {
  display: block;
  padding: 1em;
  max-width: calc(100vw - 10px - 2em);
}
</style>
<script src="thumbnail-gen.js"></script>
<script>
'use strict';

async function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
}

async function main() {
  const logo = await loadImage('http://localhost:8080/threejs/lessons/resources/threejsfundamentals-background.jpg');
  for (const text of [
    'Planar and Perspective Projection Mapping',
    'WordThatIsTooLongToDisplay Projection Mapping',
    'WebGLにおける画像処理。続き',
    'WebGL 纹理映射的透视纠正',
  ]) {
    const canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.width = logo.width;
    canvas.height = logo.height;
    genThumbnail({
      backgroundImage: logo, 
      canvas, 
      text: [
        {
          text,
          font: 'bold 100px sans-serif',
          textAlign: 'left',
          verticalSpacing: 100,
          offset: [100, 150],
          shadowOffset: [15, 15],
          strokeWidth: 15,
          textWrapWidth: 1000,
        },
        {
          text: 'threejsfundamentals.org',
          offset: [-100, -90],
          font: 'bold 60px sans-serif',
          textAlign: 'right',
          verticalSpacing: 100,
          shadowOffset: [8, 8],
          strokeWidth: 15,
          textWrapWidth: 1000,
          color: 'hsl(340, 100%, 70%)',
        },
      ],
    });
  }
}
main();

</script>