uniapp电子签名以及竖屏签名后内容旋转90度变为横屏图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp电子签名以及竖屏签名后内容旋转90度变为横屏图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

用该插件挺不错的
电子签名插件地址
如果你一个页面要用多个该插件，就改成不同的cavas-id，修改插件源码
效果图
竖屏写
uniapp电子签名以及竖屏签名后内容旋转90度变为横屏图片,uni-app,前端
旋转成横屏图片

插件内
uniapp电子签名以及竖屏签名后内容旋转90度变为横屏图片,uni-app,前端

uniapp电子签名以及竖屏签名后内容旋转90度变为横屏图片,uni-app,前端

在拿到签名临时地址后的页面文章来源地址https://www.toymoban.com/news/detail-545115.html

<!-- 旋转图片canvas -->
<canvas canvas-id="camCacnvs" :style="{'position':'absolute','top':'-2000%','width':canvasWidth+'px','height':canvasHeight+'px'}"></canvas>

data(){
	return{
		canvas:'',
		canvasWidth:300,
		canvasHeight:150,
	}
｝
onReady() {
   this.canvas = uni.createCanvasContext('camCacnvs')
},
methods:{
	//签名图片
	svaeSignImg(e){
		const that = this;
		console.log('大签名图片',e)				  
		
		let tempFilePaths = e.url;
		uni.getImageInfo({ // 获取图片的信息
			src: tempFilePaths,
			success: (msg) => {
				that.canvas.fillStyle = '#fff';
				that.canvas.fillRect(0, 0, that.canvasWidth, that.canvasHeight);
				
				// 逆时针旋转90度
				that.canvas.translate(that.canvasWidth / 2, that.canvasHeight / 2)
				that.canvas.rotate(270 * Math.PI / 180)
				// that.canvas.drawImage(msg.path, -4*width/5, -height/2, height, width);
				
				//如果你修改了画布后不能完全展示出来，可以调整这下面四个参数
				//因为翻转了，所以分别是 靠上，靠左，高，宽，慢慢修改，不然很容易就超出界面了，然而以为没显示出来
				 that.canvas.drawImage(msg.path, -that.canvasWidth*0.25, -that.canvasHeight*0.9, that.canvasWidth*0.5, that.canvasHeight*1.8)
				 that.canvas.draw(false,() => {
				 		console.log('gggggggggggg渲染完成')
				 		uni.canvasToTempFilePath({
				 			canvasId: 'camCacnvs',
				 			destWidth: that.canvasWidth,
				 			destHeight: that.canvasHeight,
				 			fileType: 'png',
				 			quality: 1, //图片质量
				 			success(vas) {
				 				console.log('完成',vas)
				 			},
				 			fail(err){
				 				console.log(err)
				 			}
				 		}) 
				 	
				 })
			}
		})
	}
}