canvas横屏签名，签名图片旋转90度生成base64

star-1331

已于 2023-08-08 11:34:57 修改

阅读量4.2k

点赞数 10

分类专栏：页面效果文章标签： javascript

于 2020-11-09 17:31:53 首次发布

本文链接：https://blog.csdn.net/weixin_40970987/article/details/109581779

版权

页面效果专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果展示

在这里插入图片描述

旋转原理

1、新建画布，画布长宽为图片较长边长的2倍
2、根据需要的旋转角度，确定旋转完之后需要复制图片的象限范围
3、对新建画布进行先移动（中心点位）后旋转处理
4、复制需要象限的图片
5、将画布的长宽为需要图片的长宽，将图片复制进去
6、将新的画布生成图片

初始位置
在这里插入图片描述结束位置

html横屏展示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  <title>签字</title>
  <style>
    html,body,.container{
    	width: 100%;
      height: 100%;
      position: fixed;
    }
    .container{
      background-color: #fff;
    }
    #canvas {
      width: 100%;
      height: 100%;
    }
    #canvas canvas {
      display: block;
    }
    .u_btn{
    	-webkit-transform:rotate(90deg);
	    display: flex;
	    justify-content: center;
	    width: 160%;
	    height: 1rem;
	    line-height: 1rem;
	    font-size: 0.32rem;
	    color: #fff;
	    background: #FE4A48;
		}
    .u_btn-bottom{
	    position: fixed;
	    bottom: 6rem;
	    left: -5.4rem;
	    right: 0;
		}
		.u_btn span{
	    flex: 1;
	    text-align: center;
		}
		.u_btn span.left{
	    color: #FE4A48;
	    border: 1px solid #FE4A48;
	    background-color: #fff;
		}
		.letter_spacing{
		  letter-spacing: 0.1rem;
		}
  </style>
</head>

<body>
<div class="container" id="container">
  <div id="canvas">
    <canvas id="canva"></canvas>
  </div>
  <div class="u_btn u_btn-bottom">
    <span class="left letter_spacing" id="cancel">重写</span>
    <span class="right" id="submit">确定</span>
  </div>
</div>
</body>
</html>

js：canvas绘画及图片旋转生成base64

 var canvas = '';
 function getCanvas() {
   var vm = this;
   canvas = document.getElementById("canva");
   var cxt = canvas.getContext("2d");
   canvas.width = document.getElementById('container').clientWidth;
   var bottoms = parseInt(parseFloat(document.documentElement.style.fontSize)*0.45)
   canvas.height = document.getElementById('container').clientHeight;
   cxt.fillStyle = "#fff"; //填充绘图的背景颜色
   cxt.fillRect(0, 0, canvas.width, canvas.height); //绘制“已填色”的矩形
   cxt.strokeStyle = 'block'; //笔触的颜色
   cxt.lineCap = "round"; //线条末端线帽的样式
   var linewidth = 2.5;
   //开始绘制
   canvas.addEventListener(
     "touchstart",
     function (e) {
       vm.isSignflag = true;
       cxt.beginPath();
       cxt.lineWidth = linewidth; //当前线条的宽度，以像素计
       cxt.moveTo(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
     }.bind(this),
     false
   );
   //绘制中
   canvas.addEventListener(
     "touchmove",
     function (e) {
       cxt.lineTo(e.changedTouches[0].clientX, e.changedTouches[0].clientY );
       cxt.stroke();
     }.bind(this),
     false
   );
   //结束绘制
   canvas.addEventListener(
     "touchend",
     function () {
     }.bind(this),
     false
   )
 }
 getCanvas()
 
 //清屏
 $("#cancel").on('click',function () {
   var cxt=canvas.getContext("2d");
   cxt.clearRect(0,0,canvas.width,canvas.height);
 })
 
 //生成签名图片
 $("#submit").on('click',function () {
	rotateBase64Img(canvas.toDataURL(), 270, function (base64data) {
		//生成的base64内容
   		var base64 = base64data.split('base64,')[1];
 	})
 })
 
//取消touch默认事件
var handle = function(event){
   event.preventDefault();
}
document.body.addEventListener('touchmove',handle,false);
document.body.removeEventListener('touchmove',handle,false); 

//签完名的图片旋转处理
function rotateBase64Img(src, edg, callback) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var imgW;//图片宽度
  var imgH;//图片高度
  var size;//canvas初始大小
  if (edg % 90 != 0) {
      console.error("旋转角度必须是90的倍数!");
      throw '旋转角度必须是90的倍数!';
  }
  (edg < 0) && (edg = (edg % 360) + 360)
  const quadrant = (edg / 90) % 4; //旋转象限
  const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标
  var image = new Image();
  image.crossOrigin = "anonymous"
  image.src = src;
  image.onload = function () {
      imgW = image.width;
      imgH = image.height;
      size = imgW > imgH ? imgW : imgH;
      canvas.width = size * 2;
      canvas.height = size * 2;
      switch (quadrant) {
          case 0:
              cutCoor.sx = size;
              cutCoor.sy = size;
              cutCoor.ex = size + imgW;
              cutCoor.ey = size + imgH;
              break;
          case 1:
              cutCoor.sx = size - imgH;
              cutCoor.sy = size;
              cutCoor.ex = size;
              cutCoor.ey = size + imgW;
              break;
          case 2:
              cutCoor.sx = size - imgW;
              cutCoor.sy = size - imgH;
              cutCoor.ex = size;
              cutCoor.ey = size;
              break;
          case 3:
              cutCoor.sx = size;
              cutCoor.sy = size - imgW;
              cutCoor.ex = size + imgH;
              cutCoor.ey = size + imgW;
              break;
      }
      ctx.translate(size, size);
      ctx.rotate(edg * Math.PI / 180);
      //drawImage向画布上绘制图片
      ctx.drawImage(image, 0, 0);
      //getImageData() 复制画布上指定矩形的像素数据
      var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
      if (quadrant % 2 == 0) {
          canvas.width = imgW;
          canvas.height = imgH;
      } else {
          canvas.width = imgH;
          canvas.height = imgW;
      }
      //putImageData() 将图像数据放回画布
      ctx.putImageData(imgData, 0, 0);
      callback(canvas.toDataURL())
  };
}

star-1331

关注

10
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
canvas横屏签名，签名图片旋转90度生成base64

效果展示html横屏展示<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <title>签字</title> &lt
复制链接

扫一扫

专栏目录