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

た入场券 2022-12-20 02:14 738阅读 0赞

## 效果展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]

## 旋转原理 ##

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

初始位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]结束位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 2]

## 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())
      };
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1d8bbfe34ae14b6cab05bab9f3a8535d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/ff10f462491f401b8e12ee1988665f53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/b09fd64a5636433c93c9f3f87872bb06.png

发表评论取消回复

表情：

评论列表（有 0 条评论，738人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas签名

<!DOCTYPE html> <html lang="zh-Hans"> <link rel="stylesheet" href="./style.css"> <

末蓝、/ 2023年10月17日 19:11/ 0 赞/ 39 阅读

相关 uniapp 横屏签名旋转canvas

使用插件[canvas手写板，横屏签名 - DCloud 插件市场][canvas_ - DCloud] 保存后签名是横屏的，上传时需正的获取到图片路径后创建新的canv

本是古典何须时尚/ 2023年09月24日 22:17/ 0 赞/ 66 阅读

相关 canvas实现手写签名

使用canvas实现手写签名，效果如下 ![20200317094026163.gif][] PC端 // 实现canvas签名 var canv

﹏ヽ暗。殇╰゛Y/ 2023年07月15日 13:09/ 0 赞/ 15 阅读

相关 echarts旋转图表、图表横屏显示或是屏幕旋转横屏示例

文档：https://echarts.apache.org/zh/option.html\title <html> <head> <meta

曾经终败给现在/ 2023年01月12日 01:46/ 0 赞/ 647 阅读

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

效果展示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

た入场券/ 2022年12月20日 02:14/ 0 赞/ 739 阅读

相关 base64生成图片——图片转换变成base64

base64生成图片——图片转换变成base64 如题。下面上货。 package com.xueyou.demo; import org

桃扇骨/ 2022年06月15日 05:22/ 0 赞/ 449 阅读

相关 canvas 图片base64压缩

作者：LoveEmperor-王子様 <!DOCTYPE html> <html lang="en"> <head> <meta cha

本是古典何须时尚/ 2022年06月02日 06:41/ 0 赞/ 322 阅读

相关 JS画布实现签名，生成base64位图片

JS画布实现签名，生成base64位图片需要引入jq，自行下载并引入代码： <html> <title>test</title>

蔚落/ 2022年01月31日 11:23/ 0 赞/ 252 阅读

相关 HMAC-SHA1签名算法(JAVA和PHP) base64签名算法(PHP)

HMAC 根据RFC 2316(Report of the IAB，April 1998)，HMAC(散列消息身份验证码: Hashed Message Authentic

缺乏、安全感/ 2021年10月15日 01:12/ 0 赞/ 460 阅读

相关 js base64图片旋转90度

[在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4...

系统管理员/ 2021年05月03日 03:01/ 0 赞/ 1289 阅读