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})
}
}
上一篇: Vue图片裁剪上传组件
下一篇: 裁剪图片的纯色背景