首先需要进入html2canvas.js
原来是生成海报的，改了改，改成生成验证码的了
仅供参考
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="js/public.js"></script> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="js/html2canvas.js"></script> <style> .haibao{position:absolute;top:0;left:0;width:4rem;z-index:0;width: 2.3rem;height: 1rem;line-height: 1rem; text-align: center;} .haibao span{font-size: .6rem;font-weight: bold;} .image{margin-top: 2rem;} </style> </head> <body> <div id="app" class="app" v-cloak> <p class="image">生成的图</p> <div class="myImage" @click="poster()" id="myImage" v-html="image"></div> <!-- 验证码背景 --> <div id="main-container" ref="container" class="haibao" :style="{'backgroundColor': colorBg}"> <span :style="[{'color': item.color,'fontStyle':item.font}]" v-for="(item,index) in list":key="index">{{item.text}}</span> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { list: [ {text: '1'}, {text: '+'}, {text: '1'}, {text: '='}, {text: '?'}, ], colorBg: '', result: '', image:'', }, methods: { poster() { this.image = ''; this.colorBg = this.colorFun(); this.list.forEach((item, index) => { item['color'] = this.colorFun(); item['font'] = this.fontFun(); index == 0 ? item.text = this.numberFun(1) : ''; index == 1 ? item.text = this.operationFun(1) : ''; index == 2 ? item.text = this.numberFun(2) : ''; }) this.makePoster('main-container') }, makePoster: function(id) { //生成验证码 var _this = this; document.body.style.overflow = 'hidden'; this.$refs.container.style.pointerEvents = 'auto'; this.$nextTick(function() { // 如正在生成时不再生成 if (this.isEnd) { return; } this.isEnd = true; _this.makeCode(id); //生成验证码 }); }, makeCode(id) { //生成验证码 this.$refs.container.style.disblock = 'block'; var _this = this; var shareContent = document.getElementById(id); // 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题 var width = shareContent.offsetWidth; // 获取(原生）dom 宽度 var height = shareContent.offsetHeight; // 获取(原生）dom 高 var offsetTop = shareContent.offsetTop; //元素距离顶部的偏移量 var canvas = document.createElement('canvas'); //创建canvas 对象 var context = canvas.getContext('2d'); var scaleBy = 2; canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移 canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题 context.scale(scaleBy, scaleBy); var opts = { scale: scaleBy, //添加的scale 参数 canvas: canvas, //自定义 canvas logging: true, //日志开关，发布的时候记得改成false width: width, //dom 原始宽度 height: height, //dom 原始高度 backgroundColor: "transparent", }; html2canvas(document.querySelector('#' + id), opts).then(function(canvas) { document.body.appendChild(canvas); let oImg = new Image(); oImg.src = canvas.toDataURL("image/png"); // 导出图片 vm.image = '<img src="'+oImg.src+'"/>' vm.isEnd = false; vm.shadowHb = true; }); this.result = eval(this.list[0].text + this.list[1].text + this.list[2].text); }, colorFun() { //随机颜色 return `rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`; }, fontFun() { //随机字体样式 return this.randomNum(0, 1) == 0 ? 'normal' : 'italic' }, randomNum(min, max) { //随机数范围 var range = max - min; var rand = Math.random(); var num = min + Math.round(rand * range); return num; }, numberFun(type) { //随机数字 return type == 1 ? this.randomNum(10, 30) : this.randomNum(0, 9) }, operationFun() { //随机运算符 return this.randomNum(0, 1) == 0 ? '+' : '-' } }, mounted() { // 生成随机验证码 this.poster(); }, created() { } }); </script>
