uniapp通过canvas生成个人电子签名,然后上传到.net core后端

简介:使用uniapp的电子签名插件,插件市场里面有很多。插件一般都是横屏签名,通过canvas生成图片也是横屏的,前端通过旋转不太好弄,所以这里通过直接上传横屏图片到.net core后台,然后进行逆时针旋转为正向的。

1.uniapp页面代码

subCanvas() {
				var that = this;
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2];
						uni.uploadFile({
							url: 'https://www.firstknow.club:8082/api/values/UploadSign',//后端接口地址							filePath: res.tempFilePath,
							name: 'file', //必填 , 此为类型名称
							success: (res) => {
								var data=JSON.parse(res.data);
								prevPage.sign ="https://www.firstknow.club:8082"+data.filePath;
								uni.navigateBack();
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									title: '签名失败!'
								});
							}
						});
					}
				});
			},

2.后端用.net core接收图片

  [HttpPost("UploadSign")]
        public ActionResult UploadImage()
        {
            try
            {
                var webRootPath = _hostingEnvironment.WebRootPath;
                var file = Request.Form.Files[0];
                byte[] bytes = new byte[file.OpenReadStream().Length];
                file.OpenReadStream().Read(bytes, 0, bytes.Length);
                MemoryStream ms = new MemoryStream(bytes);
                Bitmap bitmap = new Bitmap(ms);
                bitmap.RotateFlip(RotateFlipType.Rotate270FlipNone);//横屏生成的电子签名进行旋转
                string path ="/Sign/" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + ".jpg";
                bitmap.Save(webRootPath+path);
                ms.Close();
                bitmap.Dispose();
                return new JsonResult(new { isSuccess = true, resultMsg = "图片上传成功!", filePath = path });
            }
            catch (Exception ex)
            {
                throw new Exception(ex.ToString());
            }

        }

你可能感兴趣的:(Uniapp,vue)