canvas-film-date

胶卷日期渲染组件

安装

$ npm i canvas-film-date
 
# 或者 
 
$ yarn add canvas-film-date

DEMO

import FilmDate from './canvas-film-date'

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = document.createElement('img')
canvas.id = 'canvas'
img.src = './assets/c.jpg'
// img.src = './assets/2.jpg'
img.onload = async() => {
  canvas.width = img.width
  canvas.height = img.height
  canvas.style.width = '100%'
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

  // 渐变 DEMO
  var canvas1 = document.createElement('canvas')
  var ctx1 = canvas1.getContext('2d')
  var gradient1 = ctx1.createLinearGradient(0, 0, 390, 0)
  gradient1.addColorStop('0', 'magenta')
  gradient1.addColorStop('0.5', 'blue')
  gradient1.addColorStop('1.0', 'red')

   /**
   * 胶卷日期渲染
   * 
   * @Class FilmDate
   * @param {Object} inputCanvas 输入画布
   * @param {string} text 日期文本
   * @param {string} color 字体颜色
   * 
   * @param {Object} font 字体
   * @param {string} font.family 字体族名称
   * @param {string} font.src 字体路径（同域）
   * @param {string} font.weight 字重
   * @param {string} font.style 字体样式
   * 
   * @param {Object} shadow 阴影
   * @param {string} shadow.color 阴影颜色
   * @param {Number} shadow.blur 阴影模糊阶数
   * @param {Number} shadow.offsetX 水平方向偏移量
   * @param {Number} shadow.offsetY 垂直方向偏移量
   * 
   * @param {Array} gradients 渐变
   * 
   * @method render() 渲染日期，返回渲染后的canvas
   */

  const FimoFilmDate = new FilmDate({
    inputCanvas: canvas,
    text: '19 04 20',
    color: '#DC7611',
    font: {
      family: 'EHSMB',
      src: './assets/font/EHSMB.woff',
      // family: 'technology',
      // src: './assets/font/technology.woff',
      weight: 'normal',
      style: 'normal',
    },
    shadow: {
      color: '#5D5516',
      blur: 10,
      offsetX: 2,
      offsetY: 8,
    },
    // gradients: [gradient1],
  })
  const fimlDateCanvas = await FimoFilmDate.render()

  document.body.appendChild(fimlDateCanvas)
  
}