以文本方式查看主题

-  Foxtable(狐表)  (http://foxtable.net/bbs/index.asp)
--  专家坐堂  (http://foxtable.net/bbs/list.asp?boardid=2)
----  在httpReques中使用cancas，如何保存图片到服务器？  (http://foxtable.net/bbs/dispbbs.asp?boardid=2&id=177420)
--  作者：xluoping
--  发布时间：2022/5/21 11:30:00
--  在httpReques中使用cancas，如何保存图片到服务器？
在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>
--  作者：有点蓝
--  发布时间：2022/5/21 11:44:00
--  
function save(){
 //base64
 var dataUrl = canvas.toDataURL();
 img.src = dataUrl;
sendAjaxText(dataUrl,"accept.htm","",false);

 }

httprequest
……
Case "accept.htm"
dim str as stirng = e.PlainText.replace("data:image/png;base64,","")
Dim bs As Byte() = Convert.FromBase64String(str)
Dim stream As System.IO.Stream = New System.IO.MemoryStream(bs)
Dim bmp As System.Drawing.Bitmap = New System.Drawing.Bitmap(stream)
bmp.Save("c:\\123.png")