手机端页面ajax上传base64图片怎么实现

[weixin_41574300]

如题，现html页面上生成一个base64的图片，如何通过ajax上传到服务器啊，求个代码

[anliuty]

如果你是问怎么用js将图片转换为base64，参考下面代码：

function image2Base64(img) {
    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 dataURL = canvas.toDataURL("image/png");
    return dataURL;
}

这里得到的dataURL就是一段base64格式的字符串，至于提交到服务器，就把 dataURL当做一段普通的字符串通过ajax的post到服务器，类似下面的代码

$.post("xxx",{image:dataURL},function(result){
    //处理
  });

服务器端接收到这个字符串，再还原成图片，

byte[] arr = Convert.FromBase64String(imageString);
MemoryStream ms = new MemoryStream(arr);
Bitmap bmp = new Bitmap(ms);
bmp.Save("服务器路径");

[anliuty]

function getBase64Image(img) {
            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);
            return dataURL;
        }  
        
        function UploadPic() {
            var img = new Image();
            img.src = $('#img_id').src;

            $.ajax({
                type: 'POST',
                url: 'http://10.10.10.135:82/pies/SignatureUploadServlet',
                data: JSON.stringify({ 'image': getBase64Image(img) }),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert("Done, Picture Uploaded.");
                }
            });
        } 

大致这样吧

[weixin_41574300]

引用 1 楼 anliuty 的回复:

如果你是问怎么用js将图片转换为base64，参考下面代码：

function image2Base64(img) {
    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 dataURL = canvas.toDataURL("image/png");
    return dataURL;
}

这里得到的dataURL就是一段base64格式的字符串，至于提交到服务器，就把 dataURL当做一段普通的字符串通过ajax的post到服务器，类似下面的代码

$.post("xxx",{image:dataURL},function(result){
    //处理
  });

服务器端接收到这个字符串，再还原成图片，

byte[] arr = Convert.FromBase64String(imageString);
MemoryStream ms = new MemoryStream(arr);
Bitmap bmp = new Bitmap(ms);
bmp.Save("服务器路径");

有点不太懂，我是这么写的，帮我改改可好 function UploadPic() { var Pic = document.getElementsByTagName("img");//base64的图片 $.ajax({ type: 'POST', url: 'http://10.10.10.135:82/pies/SignatureUploadServlet', data: 'image:pic', contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (msg) { alert("Done, Picture Uploaded."); } }); }

[wuwiroa]

首先是FIleReader，这个可以传gif图
然后是canvas，这个只支持png和jpeg的格式，不过可以自己绘图定义大小尺寸和透明度
最后是效果图
觉得有用的话，就把分给我吧，我已经穷得一分都没有了！！