vue使用canvas做横屏手写签名功能,写完后确认生成png图片,但是无法将canvas旋转

本来打算横屏签完名,然后旋转,然后生成png图片。

但是做到旋转那一步就死了。


在最后的**this.saveEl.addEventListener**方法里将canvas旋转
但是用了ctx.rotate 似乎没有用。。。。
求助啊求助

vue 代码

<template>
  <div class="container">
    <div class="sign-box">
      <div id="canvas" ref="canvas"></div>
      <div class="button-box">
        <div id="clearCanvas" ref="clearCanvas">
          <p>清除</p>
        </div>
        <div id="saveCanvas" ref="saveCanvas">
          <p>保存</p>
        </div>
      </div>
    </div>
    <div class="mySign" v-show="isSign">
      <img :src="signSrc" alt />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSign: false,
      signSrc: ""
    };
  },
  created() {},
  mounted() {
    this.lineCanvas({
      el: this.$refs.canvas, //绘制canvas的父级div
      clearEl: this.$refs.clearCanvas, //清除按钮
      saveEl: this.$refs.saveCanvas //保存按钮
    });
  },
  methods: {
    lineCanvas(obj) {
      for (var i in obj) {
        this[i] = obj[i];
      }
      this.canvas = document.createElement("canvas");
      this.el.appendChild(this.canvas);
      this.ctx = this.canvas.getContext("2d");
      let size = {
        width: this.el.clientWidth,
        height: this.el.clientHeight
      };
      this.canvas.width = size.width;
      this.canvas.height = size.height;
      this.ctx.fillStyle = "#fff";
      this.ctx.fillRect(0, 0, size.width, size.height);
      this.ctx.strokeStyle = "#000";
      //用绝对坐标来创建一条路径
      this.ctx.beginPath();

      //将这条线绘制到canvas上
      this.ctx.stroke(); //只有调用stroke canvas 才会绘制图像显示结果
      this.ctx.lineWidth = 2;
      this.ctx.lineCap = "round";
      //开始绘制
      this.canvas.addEventListener(
        "touchstart",
        function(e) {
          this.ctx.beginPath();
          this.ctx.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
        }.bind(this),
        false
      );
      //绘制中
      this.canvas.addEventListener(
        "touchmove",
        function(e) {
          this.ctx.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
          this.ctx.stroke();
        }.bind(this),
        false
      );
      //结束绘制
      // this.canvas.addEventListener(
      //   "touchend",
      //   function() {
      //     this.ctx.closePath();
      //     // let imgBase64 = this.canvas.toDataURL();
      //     //console.log(imgBase64);
      //     // this.signSrc= imgBase64;
      //     // this.isSign = true;
      //   }.bind(this),
      //   false
      // );
      // //清除画布
      this.clearEl.addEventListener(
        "click",
        function() {
          this.ctx.clearRect(0, 0, size.width, size.height);
        }.bind(this),
        false
      );
      //保存图片,直接转base64
      this.saveEl.addEventListener(
        "click",
        function() {


          let imgBase64 = this.canvas.toDataURL();
          this.signSrc = imgBase64;
          this.isSign = true;
          this.ctx.clearRect(0, 0, size.width, size.height);
        }.bind(this),
        false
      );
    }
  }
};
</script>

<style scoped lang="less">
div.sign-box {
  display: flex;
  height: 100%;
  div.button-box {
    width: 20%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    div {
      text-align: center;
      // border: 1px solid blue;
      height: 50%;
      overflow: hidden;
      p {
        line-height: 50vh;
        transform: rotate(90deg);
      }
    }
  }
  #canvas {
    width: 80%;
    height: 100%;
    position: relative;
    // background: bisque;
    canvas {
      display: block;
    }
  }
}

.mySign {
  width: 100%;
  border: 1px solid red;
  box-sizing: border-box;
  img {
    width: 100%;
  }
}
</style>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问