hbuilder拍照上传,与asp.net服务器获取并保存

思路:手机拍照后,将图片用js转为base64字符串,传递给asp.net服务端

服务端解析base64,还原为图片,并保存

前端代码

        var f1=null;        //用来base64的字符串的变量
        
        function login()
        {
            
            var cmr = plus.camera.getCamera();          //启动照相机拍照
        
            var res = cmr.supportedImageResolutions[0];
            var fmt = cmr.supportedImageFormats[0];

            cmr.captureImage( function( path ){        //拍照成功后,会获取照片的相对路径
            
            plus.io.resolveLocalFileSystemURL( path, function ( entry ) {    
            var localurl = entry.toLocalURL();//                  //将相对路径转为绝对路径,相对路径的图片是无法转换为base64的
            
            
            document.getElementById("insert").innerHTML='<img src="'+localurl+'"userImage_id" />'
               
       
               
              appendFile(localurl);      //将图片路径传入函数,用来转化base64
               
               setTimeout("upload(1)", 1000); 
      });
            
        },
        function( error ) {                          //拍照未成功时提示
            alert( "Capture image failed: " + error.message );
        },
        {resolution:res,format:fmt}
    );


function appendFile(path)    

{



      var image = new Image();
      image.src = path;


      image.onload = function()

      {
            var base64 = getBase64Image(image);     //获取base64字符串,传入的是图片对象

            f1=base64;      //将局部变量转为全局变量


            f1=f1.slice(22);    //这一句很重要,我在这一句上折腾了半天,意思是:js转化成的base64字符串与c#的不一致,切掉22个字符,c#就能还原成图片了



            document.getElementById('inp1').innerText=base64;      //这一句我用来调试的,看看转成的字符串是什么样子的
      }


}



function getBase64Image(img)     //这是讲图片转为base64的主要语句,别问我为什么,我也不知道,网上抄来的,只要传入image对象,就能获取base64字符串,你照抄就行了
{
    var canvas = document.createElement("canvas");

    canvas.width = img.width;

    canvas.height = img.height;

    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0, img.width, img.height);

    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();

    var dataURL = canvas.toDataURL("image/"+ext);                   //这里我测试过了,搞出的图片都是png的,你就是jpg的也一样

    return dataURL;
}




function lianjie()
{



  mui.post('http://192.168.30.2:33200/',{

  name:f1          //将base64传给30.2服务器上

  },function(data){



    alert(data);        //成功后会获取服务器返回的提示
  },'string'

);



}

 

前端结束,接下来是后端了

后端是用post取值的,一张图片转为base64,长度有30万个字符串,get接收参数长度有限,只能依靠post

using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string base64 = Request.Form["name"];      //post获取base64字符串

        if (base64 == null)
        {
            Response.Write("空值");
        }
        else
        {
            if (base64.Length < 10)
            {
                mmf(base64);          //这一段我用来测试的,看看web是否正常运行
            }
            else
            {
                Image(base64);        //关键是这个函数
            }
        }

        //Image();

    }

    public void mmf(string bbs)
    {
        Response.Write("Hdahuang/"+bbs);


    }

    public void Image(string base64)
    {

        try
        {
            byte[] bytes = Convert.FromBase64String(base64);      //传入base64,保存位置改一改,返回字符看一看,其他地方都可以照抄

            MemoryStream memStream = new MemoryStream(bytes);

            Bitmap Bmap = new Bitmap(memStream);

            Bmap.Save(@"E:118123.png");            //这个也说明下,弄这个时候,抛出个GDI+异常,又搞了我半天,是因为文件夹权限不足,c#不能将图片保存到本地引起的,解决方案,自己百度
        }
        catch (Exception ex)
        {
            Response.Write(ex + "@@" + base64);
            return;
         
        }




        Response.Write("成功");
    }
}
原文地址:https://www.cnblogs.com/erph/p/7799772.html