前言

这是一个前端随机生成图片的组件，可以用作滑块验证组件的背景图。

效果

• 以下效果是结合滑块验证组件一起构建的。

代码

<template><img ref="random-image" />
</template>
<script>
export default {name: "RandomImg",props: {width: {type: Number,default: 400},height: {type: Number,default: 220}},mounted() {this.init()},methods: {// 生成随机颜色getRandomColor() {const r = Math.floor(Math.random() * 255)const g = Math.floor(Math.random() * 255)const b = Math.floor(Math.random() * 255)const a = Math.random()const color = `rgba(${r}, ${g}, ${b}, ${a})`return color},// 生成随机图案getRandomPattern(ctx) {const random = Math.floor(Math.random() * 3 + 1)if (random == 1) {const rectr = Math.floor(Math.random() * 2)const rectx = Math.floor(Math.random() * this.width)const recty = Math.floor(Math.random() * this.height)const rectwidth = Math.floor(Math.random() * this.width)const rectheight = Math.floor(Math.random() * this.height)if (rectr == 0) {ctx.beginPath()ctx.strokeStyle = this.getRandomColor()ctx.strokeRect(rectx, recty, rectwidth, rectheight)ctx.closePath()} else {ctx.beginPath()ctx.fillStyle = this.getRandomColor()ctx.fillRect(rectx, recty, rectwidth, rectheight)ctx.closePath()}} else if (random == 2) {var arcr = Math.floor(Math.random() * 2)var arcx = Math.floor(Math.random() * this.width)var arcy = Math.floor(Math.random() * this.height)var arcr = Math.floor(Math.random() * this.height)if (arcr == 0) {ctx.beginPath()ctx.strokeStyle = this.getRandomColor()ctx.arc(arcx, arcy, arcr, 0, 2 * Math.PI, false)ctx.stroke()ctx.closePath()} else {ctx.beginPath()ctx.fillStyle = this.getRandomColor()ctx.arc(arcx, arcy, arcr, 0, 2 * Math.PI, false)ctx.fill()ctx.closePath()}} else if (random == 3) {var movex = Math.floor(Math.random() * this.width)var movey = Math.floor(Math.random() * this.height)var linex = Math.floor(Math.random() * this.width)var liney = Math.floor(Math.random() * this.height)var linew = Math.floor(Math.random() * this.height / 5)ctx.beginPath()ctx.strokeStyle = this.getRandomColor()ctx.moveTo(movex, movey)ctx.lineTo(linex, liney)ctx.lineWidth = linewctx.stroke()ctx.closePath()}return ctx},// canvas转imagecanvasToImage(cvs) {const imgDom = this.$refs['random-image']imgDom.src = cvs.toDataURL('image/png')},// 初始化init() {const canvas = document.createElement('canvas')canvas.width = this.widthcanvas.height = this.heightlet context = canvas.getContext('2d')context.fillStyle = '#ccc'context.fillRect(0, 0, this.width, this.height)for (let i = 0; i < 10; i++) {context = this.getRandomPattern(context)}this.canvasToImage(canvas)},// 刷新图片refresh() {this.init()}}
}
</script>
<style scoped>
* {user-select: none;
}
</style>