canvas实现手写签名并旋转base64图片

MaloryBarbara 发布于1月前
0 条问题

1. touchstart:当手指触摸屏幕时,获取初始坐标,lastPos.x,lastPos.y。

2. touchmove: 当手指在屏幕上滑动的时,获取当前坐标,curLoc.x,curLoc.y。

起始位置为鼠标落下的位置(lastPos.x,lastPos.y), 结束位置为当前位置(curLoc.x,curLoc.y),重新设置初始坐标(lastPos.x,lastPos.y)

元素相对于视窗的位置集&点击位置距离当前body可视区域的x,y坐标

如果直接用鼠标点击的坐标在canvas上绘图的话,会发现,画出来的线,坐标永远都是有偏差的。

如图,鼠标的坐标系原点,和canvas的坐标系原点,不是同一个。就造成了差别。红色矩形在canvas上起始坐标,是鼠标落下的x轴距离,减去画布离页面的距离pageX-left.

canvas实现手写签名并旋转base64图片

getBoundingClientRect()

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。 你了解getBoundingClientRect()?

canvas实现手写签名并旋转base64图片

完整代码

// 获取鼠标位置在画布上的距离
      windowToCanvas(x,y){
        let rect = this.can.getBoundingClientRect()
        // x和y参数分别传入的是鼠标距离窗口的坐标,然后减去canvas距离窗口左边和顶部的距离。
        return {
         x: x - rect.left 
         y: y - rect.top
        };
      },
        touchStart(e) {
        // 上一次的坐标
        this.lastPos = this.windowToCanvas(e.touches[0].clientX,e.touches[0].clientY);
      },
       touchMove(e) {
        // 获得当前坐标
        let curLoc =this.windowToCanvas(e.touches[0].clientX,e.touches[0].clientY);
        let lineWidth = 5;
        this.ctx.lineWidth=lineWidth;
        this.ctx.beginPath();
        // 起始位置为鼠标落下的位置
        this.ctx.moveTo(this.lastPos.x,this.lastPos.y);
        // 结束位置为当前位置
        this.ctx.lineTo(curLoc.x,curLoc.y);
        this.ctx.strokeStyle= 'black';
        this.ctx.stroke();
        // 将当前坐标赋值给上一次坐标
        this.lastPos = curLoc;
      },
复制代码
<canvas id='canvas' class="canvas"
            @touchstart="touchStart"
            @touchmove="touchMove"
    ></canvas>  
复制代码

旋转base64图片

调用toDataURL,把canvas转为base64发送给后端。发现发送过去的base64图片是反的。

canvas实现手写签名并旋转base64图片

希望是这样的:

canvas实现手写签名并旋转base64图片

思路

  1. 画布旋转合适的角度,把传入的base64图片,画在新建的画布上
  2. getImageData() 提取裁剪后图像数据
  3. putImageData()把提取的图像数据画到画布上
  4. 调用toDataURL,生成最终的base64字符串

canvas实现手写签名并旋转base64图片

如图,

1.为了方便计算,新建画布的宽高都设为base64图片的高度的两倍

2.画笔位移到画布中心,如图灰色的矩形

3.画笔旋转90度,如图蓝色矩形

4.设定裁剪坐标,{sx: 0, sy: 0, ex: 0, ey: 0}

sx:开始复制的左上角位置的 ,如图,image.heihgt sy:开始复制的左上角位置的 y 坐标,如图,image.heihgt-image.width ex:将要复制的矩形区域的宽度。如图,image.height, ey:将要复制的矩形区域的高度。

rotateBase64(data){   //传入需要旋转的base64图片
        return new Promise((resolve, reject) => {
          const imgView = new Image();
          imgView.src = data;
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');
          const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; // 裁剪坐标
          imgView.onload = () => {
            const imgW = imgView.width;
            const imgH = imgView.height;
            const size = imgH;
            canvas.width = size * 2;
            canvas.height = size * 2;
            cutCoor.sx = size;
            cutCoor.sy = size - imgW;
            cutCoor.ex = size + imgH;
            cutCoor.ey = size + imgW;
            context.translate(size, size);
            context.rotate(Math.PI/2*3);
            context.drawImage(imgView, 0, 0);
            const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
            canvas.width = imgH;
            canvas.height = imgW;
            context.putImageData(imgData, 0, 0);
            resolve(canvas.toDataURL('image/png'));
          };
        });
      },
复制代码

可以这样调用

rotateBase64(imgData)
            .then((img) => {
            console.log(`旋转后的base64图片:${img}`)
            });
复制代码

延伸

后台要求的是发送base64格式的图片,如果,后台要求其他格式的呢。于是,我在想到底图片有多少种显示形式,之间又是怎样切换的。 图片的三种表现形式url、base64、blob,三者之间是否可以转化以满足需求呢?

查看原文: canvas实现手写签名并旋转base64图片

  • smallwolf
  • organicbear
  • blackkoala
  • orangebear
  • blackleopard
  • heavyleopard
  • RaleignCash
  • JudsonClaude
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。