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:\118\123.png");　　　　　　　　　　　　//這個也說明下，弄這個時候，拋出個GDI+異常，又搞了我半天，是因為文件夾權限不足，c#不能將圖片保存到本地引起的，解決方案，自己百度
        }
        catch (Exception ex)
        {
            Response.Write(ex + "@@" + base64);
            return;
         
        }




        Response.Write("成功");
    }
}