最近在做的小程序里需要用电子签名，但是生成的图片方向是竖着的，PC端用这个签名的话就会出现一大片空白。所以就有了接下来的总结。
原来的图片是这个样子的：
先说一下思路：
先要保证电子签名组件的正常使用（因为我实在是懒得改），所以我们就在电子签名组件生成的临时图片路径上下手。
我打算把生成的临时图片路径在重新绘制一个canvas假设原来的画布宽200长400，那么新的画布的长就是原来画布的宽，宽就是原来画布的长，这样就相当于把画布翻转了。
<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas>
那么还有一个问题就是新的canvas放在哪里，新的画布我们仅用于操作图片不需要展示出来，那就用绝对而定位让他跑到屏幕外边吧。
.canvsborder{
border: 1rpx solid #333;
position: fixed;
top: 0;
left: 10000rpx;
}
接下来就是把临时图片路径旋转九十度了。
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)
这个时候就发现了一个新的问题，旋转之后生成的图片是一个空白的图片，找了好久之后发现是因为调用uni.canvasToTempFilePath方法的时候canvas还没有画完图片。所以加了一个setTimeout。最后的代码是这样的
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);
好啦接下来就完成了。成品是这个样子的
