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

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 = wcanvas.height = hlet 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.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], `${filename}.${suffix}`, {type: mime})}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！