<template>
<view class="container">
<canvas
canvas-id="signatureCanvas"
class="signature-canvas"
</canvas>
<canvas
canvas-id="signatureCanvass"
class="signature-canvass"
</canvas>
<button @click="getImgData" style="position: fixed;top: 80%;">获取图片数据</button>
<button @click="fu" style="position: fixed;top: 80%;right: 0;">复现</button>
</view>
</template>
<script>
export default {
data() {
return {
ctx: null,
isDrawing: false,
lastX: 0,
lastY: 0,
canvasWidth:0,
canvasHeight:0,
getData:null
}
},
onReady() {
// 获取canvas上下文
this.ctx = uni.createCanvasContext('signatureCanvas', this);
this.ctx.setFillStyle('#ff0000');
this.ctx.fillRect(0, 0, 100, 100); // 绘制一个红色矩形
this.ctx.draw()
this.ctxs = uni.createCanvasContext('signatureCanvass', this);
this.ctxs.draw() },
methods: {
fu(){
let that=this
let data = new Uint8ClampedArray(this.getData)
console.log(data)
uni.canvasPutImageData({
canvasId: 'signatureCanvass',
x: 0,
y: 0,
width: 750,
height:500,
data: data,
success(res) {
console.log('成功',res)
},
fail(err) {
console.log('失败',err)
}
},this)
},
getImgData(){
let that=this
uni.canvasGetImageData({
canvasId: 'signatureCanvas',
x: 0,
y: 0,
width: 750,
height: 500,
success(res) {
console.log(res.width) // 100
console.log(res.height) // 100
console.log(res.data instanceof Uint8ClampedArray) // true
console.log(res.data) // 100 100 4
that.getData=res.data
}
},this)
},
}
}
</script>
<style>
.container {
width: 750rpx;
/ height: 500rpx; /
display: flex;
flex-direction: column;
background-color: #f8f8f8;
}
.signature-canvas {
width: 750rpx;
height: 500rpx;
background-color: white;
border: 1px solid #eee;
}
.signature-canvass{
width: 750rpx;
height: 500rpx;
background-color: #000;
border: 1px solid #eee;
margin-top: 30rpx;
}
</style>
0 个回复