用户横屏签名并生成旋转后的签名图片 vue_h5

已于 2023-02-20 17:29:56 修改
阅读量845 收藏 1
点赞数
文章标签： html5
于 2023-02-20 17:22:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44379053/article/details/129128150
版权 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <title>test</title>
  <meta charset="utf-8" />
  <meta http-equiv="pragram" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="expires" content="0">
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
  <style>
    .signature,
    #sign,
    .signature button {
      box-sizing: border-box;
    }

    #sign {
      position: relative;
    }

    .signBtn {
      flex-shrink: 0;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    #sign canvas {
      width: 100%;
      height: 100%;
    }

    .copyCanvas {
      display: none;
    }

    .address {
      margin: 1rem;
      padding-bottom: 1rem;
      margin-bottom: 0rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .qianming img {
      width: 1rem;
      float: right;
      margin-top: 4px;
    }

    .qianming button {
      width: 1rem;
      float: right;
      display: flex;
      justify-content: flex-end;
    }

    .qianming {
      align-items: flex-start;
    }

    .signature {
      background-color: #fff;
      /* width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  margin: 1rem; */
      height: 100%;
      width: calc(100vw - 2rem);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .signature>div:first-child {
      height: calc(100% - 70px - (0.6*16*2px));
      border: 1px dashed #c1c1c1;
      margin: 0.6rem;
    }

    .signature button {
      color: #404040;
      font-size: 1.2rem;
      width: initial;
      transform: rotate(90deg);
      text-align: center;
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background-color: transparent;
      padding: 0;
    }

    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      text-align: right;
    }

    canvas {
      position: relative;
      z-index: 2;
    }

    .mask div {
      flex: 1;
      position: relative;
    }

    .mask div span {
      transform: rotate(90deg);
      display: inline-block;
      color: #c1c1c1;
      position: relative;
      right: 0;
      top: 40px;
      font-weight: 500;
    }

    .qianmings {
      border-right: 1px dashed #c1c1c1;
    }

    .btns button {
      padding: 0.7rem;
      background-color: #5c92ff;
      border-radius: 1.5rem;
      font-size: 1.1rem;
      box-shadow: 0px 2px 5px rgb(0 0 0 / 20%);
      color: #fff;
      width: 100%;
      box-sizing: border-box;
      margin-top: 15px;
    }

    .btns {
      margin: 1rem;
    }

    .signBox {
      width: calc(100vw - 2rem);
      height: calc(100vh - 2rem);
      overflow: hidden;
    }

    #copyCanvas {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <!-- 旋转前 -->
    <img src="" id="mysignature">
    <!-- 旋转后 -->
    <img :src="signature" id="mysignatureCopy">
    <van-popup v-model="showUserSign" class="buyShow">
      <user-sign :show-user-sign="showUserSign" @changepopup="changePopup" @signature="getSignature"></user-sign>
    </van-popup>
  </div>
</body>
<script>
  /**
   * 用户签名组件
   */
  /* 注册全局组件 */
  Vue.component('user-sign', {
    template: `
    <div class="signBox">
      <canvas ref="copyCanvas" id="copyCanvas"></canvas>
      <div class="signature">
        <div id="sign" ref="fRoot">
          <div class="mask">
            <div class="qianmings">
              <span>本人签名</span>
            </div>
            <div class="qmtime">
              <span>签名时间</span>
            </div>
          </div>
        </div>
        <div class="signBtn">
          <button @click="closeUserSign">关闭</button>
          <button @click="clearCanvas">清除</button>
          <button @click="saveCanvas">保存</button>
        </div>
      </div>
    </div>
  `,
    props: ['showUserSign'],
    data () {
      return {
        linewidth: 4,
        color: '#404040',
        background: 'transparent',
        drawStatus: false,
        cxt: '',
        cxtCopy: '',
        copy: '',
        canvasStyle: {
          width: '',
          height: ''
        }
      };
    },
    mounted () {
      this.initCanvas()
    },
    methods: {
      closeUserSign () {
        this.$emit('changepopup', false)
      },
      initCanvas () {
        let canvas = document.createElement("canvas")
        this.canvas = canvas
        this.$refs.fRoot.appendChild(canvas)
        let cxt = canvas.getContext("2d")
        this.cxt = cxt
        let width = this.$refs.fRoot.clientWidth
        let height = this.$refs.fRoot.clientHeight
        cxt.fillStyle = this.background;
        canvas.width = width;
        canvas.height = height;
        this.canvasStyle.width = width;
        this.canvasStyle.height = height;
        // cxt.fillRect(0, 0, width, height);
        cxt.strokeStyle = this.color;
        cxt.lineWidth = this.linewidth;
        cxt.lineCap = "round";
        this.cxtCopy = this.$refs.copyCanvas.getContext("2d");
        this.copy = this.$refs.copyCanvas
        const offset = 24;
        //开始绘制
        canvas.addEventListener(
          "touchstart",
          function (e) {
            this.drawStatus = true
            cxt.beginPath();
            cxt.moveTo(
              e.changedTouches[0].pageX - offset,
              e.changedTouches[0].pageY - offset
            );
          }.bind(this),
          false
        );
        //绘制中
        canvas.addEventListener(
          "touchmove",
          function (e) {
            cxt.lineTo(
              e.changedTouches[0].pageX - offset,
              e.changedTouches[0].pageY - offset
            );
            cxt.stroke();
          }.bind(this),
          false
        );
        //结束绘制
        canvas.addEventListener(
          "touchend",
          function () {
            cxt.closePath();
          }.bind(this),
          false
        );
      },
      clearCanvas () {
        // 清除画布
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.drawStatus = false
      },
      saveCanvas () {
        // 保存图片，直接转base64
        let imgBase64Copy = ''
        let signature = ''
        const imgBase64 = this.canvas.toDataURL();
        const img = document.querySelector("#mysignature");
        img.src = imgBase64;
        img.onload = () => {
          // 图片宽高
          let iw = img.width
          let ih = img.height
          // canvas宽高
          let cw = 145
          let ch = 86
          const opt = this.getXY(cw, ch, ih, iw)
          this.cxtCopy.clearRect(0, 0, opt.rw, opt.rh)
          this.cxtCopy.translate(0, opt.rh + opt.points[1])
          this.cxtCopy.rotate(-Math.PI / 2)
          this.cxtCopy.drawImage(img, opt.points[1], opt.points[0], opt.rh, opt.rw)
          // 将有效部分图片截取
          let frame = this.cxtCopy.getImageData(0, 0, opt.rw, opt.rh)
          // 将canvas保持与图片大小相同
          this.copy.height = opt.rh
          this.copy.width = opt.rw
          // 清除画布
          this.cxtCopy.clearRect(0, 0, opt.rw, opt.rh)
          // 重新绘制
          this.cxtCopy.putImageData(frame, 0, 0)
          imgBase64Copy = this.copy.toDataURL();
          if (this.drawStatus) {
            signature = imgBase64Copy;
          } else {
            signature = ''
          }
          this.drawStatus = false
          this.clearCanvas()
          this.$emit('signature', signature)
        }
      },
      /**
     * @description: 
     * @param {*} cw canvas宽度
     * @param {*} ch canvas高度
     * @param {*} iw img宽度
     * @param {*} ih img高度
     * @return {*}
     */
      getXY (cw, ch, iw, ih) {
        // 比较宽高比例,大的一边撑满
        let li = iw / ih
        let lc = cw / ch
        // console.log('图片宽高比', li, 'canvas宽高比', lc);
        // 需要绘制的宽高起点
        let points = [0, 0]
        let rw, rh
        let wall = false // 是否宽度占满
        if (li > lc) {
          // 宽度100%,等比缩放
          rw = cw
          rh = rw / li
          points[0] = 0
          points[1] = (ch - rh) / 2
          wall = true
        } else {
          rh = ch
          rw = rh * li
          points[0] = (cw - rw) / 2
          points[1] = 0
          wall = false
        }
        rw = Math.floor(rw)
        rh = Math.floor(rh)
        // console.log('canvas', cw, ch, 'img', iw, ih, '绘制', rw, rh);
        return {
          points,
          rw,
          rh
        }
      }
    }
  });

</script>
<!-- <script src="js/signature.js" defer="defer"></script> -->
<script>
  new Vue({
    el: '#app',
    data () {
      return {
        showUserSign: true,
        signature: ''
      }
    },
    methods: {
      getSignature (val) {
        this.signature = val
        this.showUserSign = false
      },
      goSign () {
        this.showUserSign = true
      },
      changePopup (val) {
        this.showUserSign = val
      }
    }
  })
</script>

</html>

canvas实现图片旋转并保存 引用https://blog.csdn.net/qq_43585229/article/details/120045282

涛霸霸i
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue手写签名，canvas手写签名，canvas签名图片旋转
歪脖前端的博客
12-23 2120
安装： npm install vue-esign --save 在main.js 中引入 import vueEsign from 'vue-esign' Vue.use(vueEsign) 1.手写签名在“手机竖屏”的情况下会展示横屏的画板样式， 2.如果手机横屏的话，系统会进行适配，所以这时候展示竖屏的样式（手机翻转的时候重新生成canvas） 3.因为"手机竖屏“展示横屏的样式，所以提交的时候要把签名的图片旋转一下 4.设备的x，y轴坐标与画布的坐标不准确，还有页面布...
H5前端实现移动端手写Canvas签名(支持横竖屏，自定义图片旋转角度)
热门推荐
Jensonhui's Blog
11-20 1万+
H5前端实现移动端手写Canvas签名(横竖屏)；canvas画布旋转精度丢失；通过window.resize或window.orientation判断横屏竖屏状态；​Signature_Pad实现手写签名；javaScript旋转Base64图片并得到新的base64数据；
vue+element加入签名效果（移动端可用）
10-16
主要介绍了vue+element加入签名效果（移动端），本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
【vue/uniapp】使用 smooth-signature 实现 h5 的横屏电子签名
最新发布
花间半盘棋
04-07 713
通过github链接进行下载，然后代码参考如下，功能包含了清空、判断签名内容是否为空、生成png/jpg图片等
移动端 canvas 横屏 签名 图片旋转
qq_38202460的博客
02-09 1267
移动端 canvas 横屏 签名 图片旋转
vue使用canvas实现手写电子签名；vue使用vue-esign插件实现手写电子签名；H5使用画布签名
i_am_a_div的博客
10-26 2096
vue使用canvas实现手写电子签名；vue使用vue-esign插件实现手写电子签名；H5使用画布签名
uniapp的移动端h5的横屏电子签名
06-01
自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5...
详解Vue开发微信H5微信分享签名失败问题解决方案
10-18
主要介绍了详解Vue开发微信H5微信分享签名失败问题解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
web前端签名功能生成透明图片
10-16
当用户完成签名后，调用`toDataURL()`方法生成数据URL，并将其保存或展示给用户。 6. **安全性考虑**：由于前端生成的图片数据直接暴露在客户端，可能存在安全风险。例如，敏感的签名信息可能被恶意抓取。因此，...
vue使用canvas实现移动端手写签名
10-14
在Vue组件中，我们可以定义一个`save`方法来执行此操作，并将结果保存到Vue实例的属性`url`中，以便显示在`<img>`标签上。 ```javascript save() { const imgData = this.$refs.canvasW.toDataURL('image/png'); ...
H5移动端项目实现手写签名功能 vue实现手写签名
yangli_的博客
11-08 2336
H5移动端项目实现手写签名功能 vue实现手写签名
移动端 jquery+html5 手写签名（横屏）
12-27
用jquery+html5+css3实现移动端的手动签名，横屏签名，完美回显，可直接复用
jquery+html5 手写签名横屏
11-04
用jquery+html5+css3实现移动端的手动签名，横屏签名，完美回显，可直接复用。
vue移动端使用canvas签名的实现
11-27
效果 canvas画板移动端 .gif 需求   在一些项目业务中，经常会使用到画板，让用户自己去写/画一些东西做标示，比如说在线签电子合约、签名等，如果不用插件，那么如何使用h5的canvas画布来实现这一需求呢？ 【本篇只讨论移动端，PC端请看上篇】 分析   很明显，我们需要一个canvas，关于canvas的一些基本操作可以在w3school或者别的一些平台上熟悉一下，其实本例也是基础操作。本案例在vue中完成。（脱离vue也一样。） 首先，需要一个canvas画布 其次，考虑逻辑 把逻辑实现 1. canvas画布 随意布局的一个画布，此处值得注意的是如果ca
H5签名横屏jSignature源代码（完整版，可直接运行）
03-19
H5签名横屏jSignature源代码（完整版，可直接运行），本实例可以直接运行，内容包括jsignature插件，以及css相关的内容，本实例为手机横向屏签名，保存为图片。图片格式可选。如果想看竖屏签名的实例，可以访问本博客有着H5竖屏签名文章，也可联系作者。
vue在移动端实现电子签名手写板
tiantian082054的博客
05-30 8030
因项目需求需要实现电子签名，记录手绘笔迹并保存为base64图片(因是移动端项目，在浏览器调试的时候必须打开移动设备模式，否则绘制不了) <template> <div> <div class="signature"> <div id="canvas"></div> </div> &...
当前端遇见了强制横屏签字的需求...
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-22 236
作者：爱泡澡的小萝卜原文：https://juejin.cn/post/7260697932173590565序言人的一生就是进行尝试，尝试的越多，生活就越美好。——爱默生在前一阶段的工作中，突然接到了这个需求：_手写签批的页面在移动端竖屏时强制页面横屏展示进行签字_，一开始我觉着只要将页面使用CSS3的 transform 进行 rotate 一下就可以了，但是当我尝试后发现并不是像我想象的...
移动端（vue）横竖屏签名
qq_32538087的博客
03-16 4447
第一次接触这个移动端签名，知道用canvas但是canvas不精通。所以canvas的代码是找的别人的，本来想附上之前的链接的但是找不到了，抱歉。 你能点进来说明你目前也被这个问题困扰着，我以我个人的理解说一下思路。 大家都会怎么去签名，但是问题就在横屏和竖屏的问题上。 1、先写好横屏和视屏的样式（横屏的时候正常布局就行，不用竖着布局，只是页面的宽高变化了，样式上不会有太大的影响的），2、用...
小程序 个性签名，uni app 开发 横屏
weixin_46211267的博客
09-09 988
横屏 跳转到画布页面的，通过监听把数据传回上一个页面 签名的页面 <u-form-item style='margin-top: 20px;' label-position='top' label="同检查人员(签名)" required> <view style="display: flex;"> <view class="qm" @click="jumpHb(1)"> <span v-if='!img2'>随查签名</span&gt.
微信公众号h5开发如何使用vue横屏签名
05-10
要在微信公众号H5开发中使用Vue横屏签名，可以遵循以下步骤： 1. 在Vue项目中安装`vue-orientjs`插件，该插件可以帮助我们在Vue项目中使用横屏签名功能。 2. 在Vue项目的入口文件中引入`vue-orientjs`插件，并在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值