记uni-app移动端签名图片竖版转横版

平平无奇小天才2023-11-24 11:24

前景提示：公司uni-app移动端项目流程中有签名环节，形式是整个页面在手机横版显示，完成后转成base64图片保存

页面be like👇

问题：因为是手机横版签名，但是相对视觉还是竖着的，所以最后生成的签名图片是竖着保存的

be like👇

解决思路：再加一个横版canvas隐藏，签名生成图片后，用生成的图片在横版canvas上绘制一遍再生成签名图片

html 复制代码

<canvas :disable-scroll="true" :style="{width: h +'px',height: w +'px'}" canvas-id="tranCacnvs"></canvas>

js 复制代码

// canvas签名转为图片链接
uni.canvasToTempFilePath({
    canvasId: 'handWriting',
    fileType: 'png',
    quality: 1, //图片质量
    success(res) {
        const ctx = uni.createCanvasContext('tranCacnvs', this);
        ctx.translate(h / 2, w / 2); // 修改原点坐标（这里是以中心为坐标原点）
        ctx.rotate((-90 * Math.PI) / 180); // 逆时针旋转90度
        ctx.translate(-w / 2, -h / 2); // 修改原点坐标（这里是已左上角为坐标原点）
        ctx.drawImage(res.tempFilePath, 0, 0, w, h)
        ctx.draw();					
        uni.canvasToTempFilePath({
            canvasId: 'tranCacnvs',
            fileType: 'png',
            quality: 1, //图片质量
            success(data) {
                // 这里返回的data.tempFilePath就是横版的签名图片啦
            }
         })
}})

注意点：旋转的中心点和绘制的起点要注意，我这边是操作前都重置了成我习惯的中心点和原始点了，也可以用其他的逻辑，比如修改图片绘制的参数等