在httpReques中使用cancas,如何保存图片到服务器?
Dim wb As New weui
wb.InsertHTML("<canvas id='myCanvas'></canvas>")
e.WriteString(wb.Build)
head:
<title>文档签字</title>
<meta charset="UTF-8">
<meta name="viewport" c>
<style>
html,
body {
width: 100%;
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
#myCanvas {
margin: 10px;
border: 1px dashed #666;
box-sizing: border-box;
}
.flex_row_center {
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
js:
<script type="text/javascript">
var canvas,board,img;
canvas = document.getElementById('myCanvas');
img = document.getElementById('img');
canvas.height = 163;
canvas.width = 340;
board = canvas.getContext('2d');
var mousePress = false;
var last = null;
function beginDraw(){
mousePress = true;
}
function drawing(event){
event.preventDefault();
if(!mousePress)return;
var xy = pos(event);
if(last!=null){
board.beginPath();
board.moveTo(last.x-10,last.y-10);
board.lineTo(xy.x-10,xy.y-10);
board.stroke();
}
last = xy;
}
function endDraw(event){
mousePress = false;
event.preventDefault();
last = null;
}
function pos(event){
var x,y;
if(isTouch(event)){
x = event.touches[0].pageX;
y = event.touches[0].pageY;
}else{
x = event.offsetX+event.target.offsetLeft;
y = event.offsetY+event.target.offsetTop;
}
//log('x='+x+' y='+y);
return {x:x,y:y};
}
function log(msg){
var log = document.getElementById('log');
var val = log.value;
log.value = msg+'\n'+val;
}
function isTouch(event){
var type = event.type;
if(type.indexOf('touch')>=0){
return true;
}else{
return false;
}
}
function save(){
//base64
var dataUrl = canvas.toDataURL();
img.src = dataUrl;
//这里该如何写代码??
}
function clean(){
board.clearRect(0,0,canvas.width,canvas.height);
}
board.lineWidth = 3;
board.strokeStyle="black" //"#0000ff";
canvas.onmousedown = beginDraw;
canvas.onmousemove = drawing;
canvas.onmouseup = endDraw;
canvas.addEventListener('touchstart',beginDraw,false);
canvas.addEventListener('touchmove',drawing,false);
canvas.addEventListener('touchend',endDraw,false);
</script>