Foxtable(狐表)用户栏目专家坐堂 → 在httpReques中使用cancas,如何保存图片到服务器?


  共有3957人关注过本帖树形打印复制链接

主题:在httpReques中使用cancas,如何保存图片到服务器?

帅哥哟,离线,有人找我吗?
xluoping
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:小狐 帖子:364 积分:3698 威望:0 精华:0 注册:2016/4/2 12:11:00
在httpReques中使用cancas,如何保存图片到服务器?  发帖心情 Post By:2022/5/21 11:30:00 [只看该作者]

在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>

 回到顶部
帅哥哟,离线,有人找我吗?
有点蓝
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:107739 积分:548028 威望:0 精华:9 注册:2015/6/24 9:21:00
  发帖心情 Post By: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")

 回到顶部