[JavaScript知识库]小程序 自动生成海报 二维码可调节

<template>
  <div class="generatePicture">
    <div class="contianer"
         :style="src ? {
        backgroundImage:'url('+src+')'
      } : ''">
      <image class="code"
             id="code"
             :style="{
                top: top + 'px',
                left: left + 'px',
                width:width+'px',
                height:height + 'px'
             }"
             @touchmove="codeMove"
             @touchstart="codeStart"
             :src="codesrc"
             alt=""></image>
    </div>
    <div class="btn"
         @click="changeBg">更换背景</div>
    <div class="btn save"
         @click="initCanvas">生成图片</div>
    <canvas class="canvasId"
            canvas-id="canvasId"
            style="width: 90vw; height: 80vh;" />
  </div>
</template>
<script>
export default {
  name: 'generatePicture',
  data () {
    return {
      bw: 0, // 背景板宽
      bh: 0,
      bleft: 0, // 背景定位
      btop: 0,
      left: 0, // 二维码定位
      top: 0,
      x: 0,
      y: 0,
      width: 200, // 二微码宽度
      height: 200,
      src: '', // 背景图
      ctx: {},
      type: 'move',
      // 二维码图
      codesrc: 'http://open.weixin.qq.com/qr/code?username=develong'
    }
  },
  mounted () {
    this.getElement('.contianer')
  },
  methods: {
    codeStart (event) {
      this.x = event.clientX - this.left
      this.y = event.clientY - this.top
      console.log(this.x, this.y, this.height, this.width)
      if (this.y < 30 || this.y > (this.height - 30) || this.x < 30 || this.x > (this.width - 30)) {
        this.type = 'change'
      } else {
        this.type = 'move'
      }
    },
    getElement (id = '') {
      let _query = wx.createSelectorQuery()
      _query.select(id).boundingClientRect()
      _query.exec((res) => {
        // 初始化code 位置
        console.log(res)
        this.left = res[0].width / 2 - 100
        this.top = res[0].height / 2 - 100
        this.bw = res[0].width
        this.bh = res[0].height
        this.bleft = res[0].left
        this.btop = res[0].top
        // this.initCanvas()
      })
    },
    codeMove (event) {
      if (this.type === 'move') {
        this.move(event)
      } else {
        this.change(event)
      }
    },
    change (event) {
      let movex = event.clientX - this.left - this.x
      let movey = event.clientY - this.top - this.y
      console.log(event.clientX, this.x, this.width, this.y, this.height)
      if (this.x < 30) {
        this.width = this.width - movex
        this.move(event, 'notY')
      }
      if (this.x > (this.width - 30)) {
        this.width = this.width + movex
        this.x = this.x + movex
      }
      if (this.y < 30) {
        this.height = this.height - movey
        this.move(event, 'notZ')
      }
      if (this.y > (this.height - 30)) {
        this.height = this.height + movey
        this.y = this.y + movey
      }
    },
    move (event, type) {
      let movex = event.clientX - this.left - this.x
      let movey = event.clientY - this.top - this.y
      if ((this.left + movex + 16) > this.bleft && ((this.left + movex) < (this.bleft + this.bw - this.width - 16)) && type !== 'notZ') {
        this.left = this.left + movex
      }
      if ((this.top + movey) > this.btop && ((this.top + movey) < (this.btop + this.bh - this.height)) && type !== 'notY') {
        this.top = this.top + movey
      }
    },
    changeBg () {
      let _this = this
      wx.chooseImage({
        count: 1,
        success: function (res) {
          _this.src = res.tempFilePaths[0]
        }
      })
    },
    initCanvas () {
      this.ctx = wx.createCanvasContext('canvasId')
      // this.ctx.setStrokeStyle('#000')
      // console.log(this.ctx, this.width, this.height)
      // this.cxt.globalCompositeOperation = 'destination-over'
      let _this = this
      if (this.src) {
        this.ctx.drawImage(this.src, 0, 0, this.bw, this.bh)
        // this.ctx.draw()
      }
      if (this.codesrc.indexOf('http') > -1) {
        wx.getImageInfo({
          src: this.codesrc,
          success (res) {
            console.log(res)
            _this.ctx.drawImage(res.path, _this.left, _this.top, _this.width, _this.height)
            _this.ctx.draw(false, () => {
              _this.save()
            })
          }
        })
      } else {
        this.ctx.drawImage(this.codesrc, this.left, this.top, this.width, this.height)
        this.ctx.draw()
      }

      // // this.ctx.draw()
      // this.ctx.fillText('你要添加的文字', 0, 90) // 在画布上绘制被填充的文本

      // this.ctx.setTextAlign('center') // 文字居中

      // this.ctx.setFillStyle('#a00b0f') // 文字颜色：黑色
    },
    save () {
      wx.canvasToTempFilePath({ // 将canvas生成图片
        canvasId: 'canvasId',
        x: 0,
        y: 0,
        width: this.bw,
        height: this.bh,
        destWidth: this.bw, // 截取canvas的宽度
        destHeight: this.bh, // 截取canvas的高度
        success: function (res) {
          wx.saveImageToPhotosAlbum({ // 保存图片到相册
            filePath: res.tempFilePath,
            success: function () {
              wx.showToast({
                title: '生成图片成功！',
                duration: 3000
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.generatePicture {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contianer {
  /* background-image:url("http://mpvue.com/assets/logo.png");  */
  background-color: #f4f4f4;
  width: 90vw;
  background-size: 100% 100%;
  height: 80vh;
  padding: 0;
  position: relative;
}
.code {
  position: absolute;
}
.code::after{
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  border: 30px solid #f42;
  opacity: 0.3;
  top:0;
  left: 0;
  box-sizing: border-box;
}
.btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 5px 0;
  background: #f4f4f4;
}
.btn.save{
   background: greenyellow
}
.canvasId {
  opacity: 0;
  z-index: 0;
  position: absolute;
  top: -80vh;
}
</style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖