vue用canvas横屏签名

最近遇到一个签名需求由于canvas一些特性，横屏签名不好控制，也是多方借鉴才解决，写真就是为了记录下，方便有需要的同学。
js代码如下：

import Draw from "../../../libs/draw";
export default {name: "canvas",data() {return {degree: 0 // 屏幕整体旋转的角度, 可取 -90,90,180等值};},components: {Draw},inject: ["reload"],mounted() {this.canvasBox = document.getElementById("canvasBox");this.initCanvas();var evt = "onorientationchange" in window ? "orientationchange" : "resize";var that = this;window.addEventListener(evt,function() {// alert(evt);setTimeout(function() {that.reload();}, 300);},false);},computed: {getHorizontalStyle() {const d = document;const w =window.innerWidth ||d.documentElement.clientWidth ||d.body.clientWidth;const h =window.innerHeight ||d.documentElement.clientHeight ||d.body.clientHeight;let length = (h - w) / 2;let width = w;let height = h;if (width < height) {this.degree = 90;width = h;height = w;} else {length = 0;}if (this.canvasBox) {this.canvasBox.removeChild(document.querySelector("canvas"));this.canvasBox.appendChild(document.createElement("canvas"));setTimeout(() => {this.initCanvas();}, 200);}return {transform: `rotate(${this.degree}deg) translate(${length}px,${length}px)`,width: `${width}px`,height: `${height}px`,transformOrigin: "center center"};}},methods: {initCanvas() {const canvas = document.querySelector("canvas");this.draw = new Draw(canvas, -this.degree);},clear() {this.draw.clear();},download() {const image = this.draw.getPNGImage();const blob = this.draw.dataURLtoBlob(image);const url = "";const successCallback = response => {console.log(response);};const failureCallback = error => {console.log(error);};this.draw.upload(blob, url, successCallback, failureCallback);}}
};

html代码：

<template><div id="canvasBox" :style="getHorizontalStyle"><canvas style="background-color:#fff;"></canvas><div class="greet"><div class="btnBox"><div class="btn" @click.native="clear()">重置</div><div class="btn" @click.native="download()" style="backgroundColor:#409EEF">确认</div></div></div></div>
</template>

css部分


<style lang="less" scoped>
#canvasBox {display: flex;flex-direction: column;height: 100%;
}
.greet {padding: 20px;font-size: 20px;user-select: none;
}
.greet a {cursor: pointer;
}
.greet select {font-size: 18px;
}
canvas {flex: 1;cursor: crosshair;
}
.btnBox {padding: 0 2%;box-sizing: border-box;.btn {text-align: center;color: #fff;background-color: #f91;height: 40px;line-height: 40px;font-weight: 300;font-size: 1em;border-radius: 4px;}
}
</style>

这个项目需要一个插件draw.js
毕竟不是app无法控制横竖屏，所以本来是横屏就直接签名，竖屏旋转。

vue中canvas签名相关推荐

vue 中 canvas 和svg合用制作地图
<template><div class="contents"><div class="lefttop1-title">区域 ...
vue 中canvas 根据点画出圆滑的曲线
文件BezierMaker.js var BezierMaker = function(canvas, bezierCtrlNodesArr, color) {// this.canvas = can ...
vue中微信分享的踩坑之旅
最近基于vue做一个h5的项目,里面涉及到微信分享,当时心里想着,这微信分享不是分分钟的事嘛,而且自己年初还做个一个项目,也实现了微信自定义分享,代码都是现成的,妥妥的放心. 上周二上午花了1个小时, ...
vue中使用js进行AES加密及解密（含密钥和iv偏移量）、以及HMAC-SHA256加密方法对于签名加密的使用
一.AES加密解密 1.下载安装 npm install crypto-js --save-dev 2.在utils文件夹下创建encryp.js文件进行aes加密解密工具类方法的封装 import ...
vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）
需求:在h5网页中打开pdf文件,要求给文件添加水印实现技术及插件:vue,vue-pdf,canvas 插件安装: npm i vue-pdf --save npm i pdf-lib --sav ...
H5 VUE实现手机签名功能
H5 VUE实现手机签名功能功能描述: 利用canvas实现手机签名转化成图片( 包含重绘,由于手机全屏展示所以还添加了图片翻转) 上传后台功能展示: 这里是封装了一个小组件废话不多说上代码: ...
web 前端签名插件_匠心打造canvas签名组件
本文首发于CSDN网站,下面的版本又经过进一步的修订. 原文:匠心打造canvas签名组件导读 6月又是项目吃紧的时候,一大波需求袭来,猝不及防. 度过了漫长而煎熬的6月,是时候总结一波.最近移动端 ...
vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)
Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个&qu ...
vue 数组转集合_思想实验：如何在Vue中使localStorage具有响应式？
响应式是Vue的最大特色之一.如果你不知道幕后情况,它也是最神秘的地方之一.例如,为什么它不能用于对象和数组,而不能用于诸如 localStorage 之类的其他东西? 让我们回答这个问题,在解决这个 ...

vue中canvas签名

vue用canvas横屏签名

vue中canvas签名相关推荐

最新文章

热门文章