700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > js canvas 动态生成图片 以及将base64转换成file对象

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

时间:2020-05-27 04:53:47

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。