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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

思路：手机拍照后，将图片用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("成功");
    }
}