Recently, I worked on a small program that required electronic signatures, but the resulting image orientation was vertical, and a large blank space appeared when using this signature on the PC. So here’s the summary.

The original picture looked like this:

Here’s the idea:

To make sure the electronic signature component works (because I’m too lazy to change it), let’s start with the temporary image path generated by the electronic signature component.

I plan to redraw a canvas with the generated temporary picture path. Suppose the original canvas is 200 wide and 400 long, then the length of the new canvas is the width of the original canvas, and the width is the length of the original canvas, which is equivalent to flipping the canvas.


  <canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}"  class="canvsborder"></canvas>
Copy the code

Then there is another problem is where to put the new canvas. The new canvas is only used for manipulating pictures and does not need to be displayed, so let it run out of the screen with absolute positioning.

.canvsborder{

  border: 1rpx solid #333;

  position: fixed;

  top: 0;

  left: 10000rpx;

}
Copy the code

The next step is to rotate the temporary image path by 90 degrees.

const that =this

const ctx = uni.createCanvasContext('camCacnvs'.this);

    ctx.translate(0.this.width);

    ctx.rotate(-90 * Math.PI / 180)

    ctx.drawImage(path, 0.0.this.width, this.height)

    ctx.draw()

 uni.canvasToTempFilePath({

      canvasId: 'camCacnvs'.success: function (res) {

          var tempFilePath = res.tempFilePath;

          that.$emit('sumbit', res,that.Strokes)

          },

  fail: (err) = > {

   console.log('fail', err)

  }

},this)
Copy the code

There is a new problem: the rotated image is a blank image. After a long search, the canvas has not finished drawing the image when calling uni.canvastotempFilepath. So we have a setTimeout. The final code looks like this

const that =this

const ctx = uni.createCanvasContext('camCacnvs'.this);

    ctx.translate(0.this.width);

    ctx.rotate(-90 * Math.PI / 180)

    ctx.drawImage(path, 0.0.this.width, this.height)

    ctx.draw()

setTimeout(() = > {

 uni.canvasToTempFilePath({

      canvasId: 'camCacnvs'.success: function (res) {

          var tempFilePath = res.tempFilePath;

          that.$emit('sumbit', res,that.Strokes)

          },

  fail: (err) = > {

   console.log('fail', err)

  }

},this)},200);

Copy the code

All right, so we’re done. The finished product looks like this