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

最新推荐文章于 2024-08-09 17:42:06 发布

mystraight

最新推荐文章于 2024-08-09 17:42:06 发布

阅读量1w

点赞数 2

分类专栏：原生js 文章标签： canvas js 生成file对象

本文链接：https://blog.csdn.net/qq_35568483/article/details/80287940

版权

原生js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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})
  }
}