欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js canvas 动态生成图片,以及将base64转换成file对象

程序员文章站 2022-04-09 08:04:18
...
export default class DrawIamge {
  // 随机生成RGBA颜色
  randomRgbaColor (min, max) {
    let r = min + Math.round(Math.random() * 1000) % (max - min) // 随机生成256以内r值
    let g = min + Math.round(Math.random() * 1000) % (max - min) // 随机生成256以内g值
    let b = min + Math.round(Math.random() * 1000) % (max - min) // 随机生成256以内b值
    return `rgb(${r},${g},${b})` // 返回rgba(r,g,b,a)格式颜色
  }
  convertImageToCanvas (w, h, text) {
    let canvas = document.createElement('canvas')
    canvas.width = w
    canvas.height = h
    let context = canvas.getContext('2d') // 获取对应的2D对象(画笔)
    context.fillStyle = this.randomRgbaColor(210, 256) // 设置填充的背景颜色
    context.fillRect(0, 0, w, h) // 绘制 w*h 像素的已填充矩形:
    context.fillStyle = '#fff'
    context.textAlign = 'center'
    context.font = "bold 18px'字体','字体','宋体'" // 设置字体
    context.textBaseline = 'hanging' // 在绘制文本时使用的当前文本基线
    context.fillText(text, w / 2, (h / 2) - 9) // 设置文本内容
    return canvas.toDataURL('image/png')
  }
  // 将base64转换成file对象
  dataURLtoFile (dataurl, filename = 'file') {
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let suffix = mime.split('/')[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], `${filename}.${suffix}`, {type: mime})
  }
}