canvas橫屏簽名，簽名圖片旋轉90度生成base64

star-1331發表於2020-11-09
Canvas

效果展示
在這裡插入圖片描述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);
      ctx.drawImage(image, 0, 0);
      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;
      }
      ctx.putImageData(imgData, 0, 0);
      callback(canvas.toDataURL())
  };
}

相關文章