实现形式：html页面中引入vue方式
一、核心代码 - html部分
<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>二、核心代码 - js部分
<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>
</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() {
// api.closeWin()
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;
// console.log(imgBase64)
img.onload = () => {
// 图片宽高
let iw = img.width
let ih = img.height
console.log(iw,ih)
// canvas宽高
// let cw = 763
let cw = 145
let ch = 86
// let ch = 346
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();
// console.log(imgBase64Copy)
if (this.drawStatus) {
signature = imgBase64Copy;
} else {
signature = ''
}
this.drawStatus = false
this.clearCanvas()
this.$emit('signature', signature)
setTimeout(() => {
// api.closeWin()
this.uploadOss(imgBase64Copy)
}, 3000)
}
},
/**
* @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
}
},
uploadOss(imgBase64Copy) {
// 1.先转为 blob格式 file.content是此文件的base64格式
let blob = this.dataURLtoBlob(imgBase64Copy);
// 拿到文件名
// let fileName = file.file.name;
// 2，在转为 file类型
let file1 = this.blobToFile(blob, '签名.png');
console.log("file1:", file1);
const formData = new FormData();//将选择上传的name="pdfFile"的文件赋值给formData
// formData.append("bizType", '1');//接口还需要一个用户名参数，通过append附加到formData上
formData.append("file", file1);//接口还需要一个用户名参数，通过append附加到formData上
var token = api.getPrefs({
sync: true,
key: 'token'
})
console.log(token, url.uploadFile())
$.ajax({
type: 'post',
url: url.uploadFile(),
data: formData,
processData: false,
contentType: false,
dataType: 'json',
headers: {
'X-Token': token
},
success: function (res) {
console.log('上传成功', JSON.stringify(res));
api.toast({
msg: '上传成功',
duration: 3000,
location: 'middle'
});
},
error: function (err) {
api.hideProgress();
api.toast({
msg: '上传失败',
duration: 3000,
location: 'middle'
});
}
});
},
//1,先将base64转换为blob
dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
//2,再将blob转换为file
blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date(); // 文件最后的修改日期
theBlob.name = fileName;
console.log(fileName) // 文件名
return new File([theBlob], fileName, { type: theBlob.type, lastModified: Date.now() });
},
}
});
</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
if (!val) {
api.closeWin()
}
}
}
})
</script>三、全部代码（html文件）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui/aui.css">
<script type="text/javascript" src="../../script/vue.js"></script>
<link rel="stylesheet" href="../../css/index.css" />
<link rel="stylesheet" href="../../css/base.css" />
<script src="../../script/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 type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<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>
</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() {
// api.closeWin()
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;
// console.log(imgBase64)
img.onload = () => {
// 图片宽高
let iw = img.width
let ih = img.height
console.log(iw,ih)
// 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();
// console.log(imgBase64Copy)
if (this.drawStatus) {
signature = imgBase64Copy;
} else {
signature = ''
}
this.drawStatus = false
this.clearCanvas()
this.$emit('signature', signature)
setTimeout(() => {
// api.closeWin()
this.uploadOss(imgBase64Copy)
}, 3000)
}
},
/**
* @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
}
},
uploadOss(imgBase64Copy) {
// 1.先转为 blob格式 file.content是此文件的base64格式
let blob = this.dataURLtoBlob(imgBase64Copy);
// 拿到文件名
// let fileName = file.file.name;
// 2，在转为 file类型
let file1 = this.blobToFile(blob, '签名.png');
console.log("file1:", file1);
const formData = new FormData();//将选择上传的name="pdfFile"的文件赋值给formData
// formData.append("bizType", '1');//接口还需要一个用户名参数，通过append附加到formData上
formData.append("file", file1);//接口还需要一个用户名参数，通过append附加到formData上
var token = api.getPrefs({
sync: true,
key: 'token'
})
console.log(token, url.uploadFile())
$.ajax({
type: 'post',
url: url.uploadFile(),
data: formData,
processData: false,
contentType: false,
dataType: 'json',
headers: {
'X-Token': token
},
success: function (res) {
console.log('上传成功', JSON.stringify(res));
api.toast({
msg: '上传成功',
duration: 3000,
location: 'middle'
});
},
error: function (err) {
api.hideProgress();
api.toast({
msg: '上传失败',
duration: 3000,
location: 'middle'
});
}
});
},
//1,先将base64转换为blob
dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
//2,再将blob转换为file
blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date(); // 文件最后的修改日期
theBlob.name = fileName;
console.log(fileName) // 文件名
return new File([theBlob], fileName, { type: theBlob.type, lastModified: Date.now() });
},
}
});
</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
if (!val) {
api.closeWin()
}
}
}
})
</script>
</html>四、实现效果
1.签名页面
2.签名结束页面
3.处理后签名图片
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
