网页鼠标签名，并上传图片的Vue组件
代码如下：
<template>优质内容筛选与推荐>>
<section class="signature">
<sj-panel class="singnature-name-container" :border="false" style="width:800px;margin-left:-400px;margin-top:-250px;">
<div class="sign-argree">
<p class="text-ti" style="width:750px;margin:0 auto;">针对此次保养，请输入物业评价意见：</p>
<textarea class="evaluate" style="width:750px;margin:0 auto;display:block;height:80px;" v-model="ageeTx"></textarea>
<p class="text-ti" style="width:750px;margin:10px auto 0;">请用鼠标在此签字：</p>
<div class="signatureBox">
<div class="canvasBox" ref="canvasHW">
<div class="write-container">
<canvas ref="canvasF" @touchstart='touchStart' @touchmove='touchMove'
@touchend='touchEnd' @mouseup="mouseUp" @mousedown="mouseDown"
@mousemove="mouseMove" @mouseleave="mouseLeave"
width="750" height="250"></canvas>
<div @click="overwrite" class="rewriteBtn">
<sj-button :bg="true"><span slot="btnText">重写</span></sj-button>
</div>
</div>
<div class="btnBox">
<div @click="overwrite">
<sj-button><span slot="btnText">取消</span></sj-button>
</div>
<div @click="commit">
<sj-button><span slot="btnText">确定</span></sj-button>
</div>
</div>
</div>
</div>
</div>
</sj-panel>
<!--<img class="imgCanvas" :src="imgUrl" >-->
</section>
</template>
<script>
import SjPanel from '@/components/SjPanel'
import SjButton from '@/components/Button'
export default {
components:{
SjPanel,
SjButton
},
data() {
return {
ageeTx:'',
stageInfo:'',
imgUrl:'',
client: {},
points: [],
canvasTxt: null,
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
endY: 0,
endX: 0,
w: null,
h: null,
isDown: false,
isViewAutograph: this.$route.query.isViews > 0,
contractSuccess: this.$route.query.contractSuccess,
sing:false,
uploadToken:'',
uploadKey:'',
qiniu:'https://upload.qiniup.com/',//七牛云上传地址
baseUrl:"http://images.81dd.cn/",
}
},
mounted() {
setTimeout(()=>{
let canvas = this.$refs.canvasF;
this.canvasTxt = canvas.getContext('2d')
this.stageInfo = canvas.getBoundingClientRect();
},1000);
this.getQiniuToken();
},
methods: {
mouseLeave(){
this.mouseMove = null;
this.isDown = false;
},
//mobile
touchStart(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clienX,
y: ev.targetTouches[0].clientY,
}
this.startX = obj.x
this.startY = obj.y
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
}
},
touchMove(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stageInfo.left,
y: ev.targetTouches[0].clientY - this.stageInfo.top
}
this.moveY = obj.y
this.moveX = obj.x
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
}
},
touchEnd(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stageInfo.left,
y: ev.targetTouches[0].clientY - this.stageInfo.top
}
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
}
},
//pc
mouseDown(ev) {
ev = ev || event
ev.preventDefault()
if (1) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.startX = obj.x
this.startY = obj.y
this.canvasTxt.beginPath()
this.canvasTxt.lineWidth = '3'
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
this.isDown = true
}
},
mouseMove(ev) {
ev = ev || event
ev.preventDefault()
if (this.isDown) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.moveY = obj.y
this.moveX = obj.x
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
}
},
mouseUp(ev) {
ev = ev || event
ev.preventDefault()
if (1) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
this.points.push({x: -1, y: -1})
this.isDown = false
}
},
//重写
overwrite() {
this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
this.points = []
},
//提交签名
commit() {
this.imgUrl=this.$refs.canvasF.toDataURL();
this.uploadQiniu();
//上传七牛元
},
/************获取token**************/
getQiniuToken(){
this.$http(this.$url.上传文件,{}).then(data => {
var data = data.data;
this.uploadToken = data.uploadToken;
this.uploadKey = data.uploadKey;
}).catch(failure => {
});
},
/**************ajax上传图片到七牛云****************/
uploadQiniu(){
let _this = this;
var thit = this;
var bytes = window.atob(this.imgUrl.split(',')[1]);
var array = [];
for(var i = 0; i < bytes.length; i++){
array.push(bytes.charCodeAt(i));
}
var blob = new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
var formData = new FormData();
formData.append('file',blob, Date.now() + '.jpg');
formData.append("key",this.uploadKey);
formData.append("token",this.uploadToken);
$.ajax({
url: thit.qiniu,
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function (data) {
_this.$emit('agree',{
agreeText:_this.ageeTx,
sigPic:_this.baseUrl+data.key
});
},
error: function () {
_this.$sjAlert("","上传失败！",()=>{});
}
});
}
}
}
</script>
<style scoped>
.write-container{
position:relative;
}
.rewriteBtn{
position:absolute;
right:40px;
bottom:5px;
}
.text-ti{
line-height:40px;
}
.sign-argree{
padding:15px;
}
.btnBox div{
display:inline-block;
margin:0 30px;
}
.btnBox{
text-align:center;
}
.evaluate{
width:100%;
background:none;
border:1px solid rgba(91, 242, 255, 1);
padding:15px;
box-sizing:border-box;
}
.signature{
width:100%;
height:100%;
position:fixed;
background:rgba(0,0,0,0.5);
top:0;
z-index:100;
}
.signature div.singnature-name-container{
height:600px;
width:900px;
margin:0 auto;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-450px;
}
.signatureBox {
width: 100%;
height: calc(100% - 50px);
box-sizing: border-box;
overflow: hidden;
/*background: #fff;*/
z-index: 100;
display: flex;
flex-direction: column;
}
.canvasBox {
box-sizing: border-box;
flex: 1;
display:block;
margin:0 auto;
}
canvas {
border: 1px solid rgba(91, 242, 255, 1);
background:#fff;
margin:0 auto;
display:block;
}
</style>
直接复制之后可能会报错，只需要把引入的两个组件去掉，不会影响功能。
1、Tomcat、Weblogic、JBoss、GlassFish、Resin、Websphere弱口令及拿webshell方法总结 [复制链接]
2、CentOS环境下搭建青岛大学OJ
3、canvas变换
4、微信小程序中使用Async-await方法异步请求变为同步请求
5、运算放大器常用参数指标