多串君
多串君
  • 发布:2014-12-31 17:38
  • 更新:2018-09-08 15:15
  • 阅读:90182

分享我自己弄的图片压缩上传的DEMO,带服务器端。用H5+的拍照和选择相册功能都可以上传。

分类:HTML5+

我是参照官方推荐的js---->localResizeIMG改的,这个多看看就懂了。
这个是版本2--->localResizeIMG-2导入JS,直接丢一个页面里就能看到效果。代码很简洁,就是我看不懂。。大家可以看看挺厉害的。

具体就是用HTML 5 <canvas> 处理图片,再生成Base64编码。然后把这段Base64传到服务器端解码-写入文件就行啦。后面会说一下!

图片的选择用H5 的拍照或者选择相册都行,就像下面

// 拍照添加文件  
 function getImage() {  
    var cmr = plus.camera.getCamera();   
    cmr.captureImage( function ( p ) {          
        plus.io.resolveLocalFileSystemURL( p, function ( entry ) {      
            if(files.length<2){   
                  var localurl = entry.toLocalURL();//把拍照的目录路径,变成本地url路径,例如file:///........之类的。  
                  appendFile(localurl);  
                    }   
                });     
    },function( error ) {  
            alert( "Capture image failed: "   error.message );  
        }    
    );     
}   

// 从相册添加文件   
function appendByGallery(){  
    plus.gallery.pick(function(path){  

         appendFile(path);//处理图片的地方  
    });  
}  

<----------------------------------接下来是处理图片------------------------------------------------>

// 添加文件  
var f1=null;  
function appendFile(path){  

  var img = new Image();  
        img.src = path;        // 传过来的图片路径在这里用。  
        img.onload = function () {  
            var that = this;  
            //生成比例   
            var w = that.width,  
                h = that.height,  
                scale = w / h;   
                w = 480 || w;              //480  你想压缩到多大,改这里  
                h = w / scale;  

            //生成canvas  
            var canvas = document.createElement('canvas');  

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

            $(canvas).attr({width : w, height : h});  

            ctx.drawImage(that, 0, 0, w, h);  

            var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8 );   //1最清晰,越低越模糊。有一点不清楚这里明明设置的是jpeg。弹出 base64 开头的一段 data:image/png;却是png。哎开心就好,开心就好  
//              alert(base64);        

           f1 =base64;   // 把base64数据丢过去,上传要用。  

            var pic = document.getElementById("x");      
            pic.src = base64;                    //这里丢到img 的 src 里面就能看到效果了  
    }  

}

<----------------------------------然后是上传到服务器------------------------------------------------>

// 上传文件  
function upload(){   

     var wt=plus.nativeUI.showWaiting();  
     var url = '后台地址';  
            var dataType ='json';  
            //发送数据    
            var data = {   
                files1:f1       //base64数据          
            };      
            $.post(url, data, success, dataType);                            
}  
        //成功响应的回调函数  
        var success = function(response) {     
            plus.nativeUI.closeWaiting();  
            if(response != null){  
                alert("上传成功");   
            }  

     }   

<----------------------------------服务器接到数据,就很简单了------------------------------------------------>

<?php   

        $s=dirname(__FILE__); //获的服务器路劲  
        $time =time();        //获得当前时间戳  
    $files =$_POST['files1'];  
         $files1 = substr($files1,22);  //百度一下就可以知道base64前面一段需要清除掉才能用。  
     //解码  
         $tmp  = base64_decode($files1);  
         $fp=$s."/uploads/".$time.".jpg";  //确定图片文件位置及名称  
         //写文件  
         file_put_contents( $fp, $tmp);  //给图片文件写入数据  
         echo 1;

大概就是这样了,写的很乱。3M的图片到服务器上就500KB左右了,这里的500Kb是自己控制的不是固定只能压缩成500kb,你可以压缩到100kb的。


关于 拍摄后图片可能会方向不对,可以看楼下评论里面 --- 伟子 ---- 的回复他有提供Demo。

2014-12-31 17:38 1 条评论 负责人:无 分享
已邀请:
萌大叔

萌大叔 - 北航研究院项目经理

现在插件地址已经更新到localResizeIMG3
原来的库在安卓上照片会有转动90度的问题,今天早上我已经修正,并提交给作者了,现在已经合并了代码。
大家可以下载过来测试一下

            // 从相册添加文件   

        function pickUpFromGallery() {  
            plus.gallery.pick(function(path) {  
              plus.io.resolveLocalFileSystemURL(path, function(entry){  
                var localURL = entry.toLocalURL();  
                //document.getElementById('resImg').src = localURL;  
                compressImg(localURL); //处理图片的地方  
              }, function(e){  
                console.log("失败:" + error.message);  
        }, {  
          filename: "_doc/camera/",  
          index: 1  
        });  
            });  
        }  

function compressImg(path) {  
          console.log('开始压缩:' + path);  
            lrz(path, {width:300}, function(result) {  
                document.getElementById('compressedImg').src = result.base64;  
                console.log('文件大小:' + (Math.floor(result.base64Len / 1024)) + 'K');  
            });  
        }
  • JL

    我感觉这个插件 速度好慢 压缩 压缩一次要8s

    2015-10-10 11:17

  • damdmen

    请问这个lrz压缩后只能先得到base64再转换成blob对象上传吗?可以直接得到文件对象么

    2016-03-09 21:09

  • 2***@qq.com

    链接地址失效了,能重新发一下么?急求转动90度的答案!感谢。。

    2018-01-31 17:08

伟子

伟子

你这个拍照在iphone里面就不生效了哦,应该这样就可以了

var cmr = plus.camera.getCamera();  
    cmr.captureImage(function(p) {  
        plus.io.resolveLocalFileSystemURL(p, function(entry) {  
            appendFile(entry.fullPath); //处理图片的地方  
        }, function(e) {  
            plus.nativeUI.alert(e.message);  
        });  
    }, function(e) {}, {  
        filename: "_doc/camera/"  
    });
  • 多串君 (作者)

    哈哈 ,是滴啊。我今天刚改了。

    2015-01-16 13:20

  • 多串君 (作者)

    我是直接这样。

    var localurl = entry.toLocalURL();

    appendFile(localurl);

    2015-01-16 13:29

  • 伟子

    回复 多串君:哦?你已经改了?哈哈~~~

    2015-01-16 15:48

  • shuoS

    回复 伟子:我改过之后为什么在IPHONE上还是获取不到拍照后的图片,本地的可以取到。

    2015-03-30 15:11

  • huyong1978

    在iphone上压缩后,图片出现变形,高度没按等比生成,全部挤在顶部了

    2015-08-10 17:16

huyong1978

huyong1978

C#服务器端


                        string image1Name = WebHelper.GetRequest("Image1Name", string.Empty);  
                        string image1Data = WebHelper.GetRequest("Image1Data", string.Empty);  
                        if (!String.IsNullOrEmpty(image1Name) && !String.IsNullOrEmpty(image1Data) && image1Data.Length > 23)  
                        {  
                            image1Data = image1Data.Substring(23);  

                            //大图  
                            string path = UIHelper.GetAbsoultFolder(UIHelper.GetUploadRelativePath() + image1Name);  
                            ImageProcessor.SaveImageFromBase64String(image1Data, path);  

                        }
  • wangfly

    能全面给点源码吗?

    2017-02-20 22:04

小闹

小闹

谢谢分享,好东西要顶。

  • 多串君 (作者)

    啊哈哈,有用就好。

    2014-12-31 17:48

伟子

伟子

不错的代码,很有用。

  • 小宇DeDe

    你好问下,关于手机拍照后显示的是旋转90度的怎么处理,谢谢了。

    2017-03-23 10:12

llyzlc

llyzlc

多张图片怎么办。。。遍历for循环好像不起效。。

  • 多串君 (作者)

    我的想法,选择图片和拍照都是一次一个,点一次i=0;file[i]=base64,i++;这样就能循环把base64放入数组了。数组传到后台,循环解码

    2015-01-15 23:01

伟子

伟子

还有防止图片上传到服务器不是正着的,应该在Canvas处理一下,判断图片拍摄时的角度,我是用canvasResize做的

  • 踩着单车载着猪

    源码地址贴出来吧~

    2015-01-29 22:14

  • h5_学习者

    哥们,有代码吗?求share

    2015-02-02 16:13

  • 伟子

    http://cd2014.porsche-events.cn/ 终于找到了以前做的Demo

    2015-02-03 16:17

  • h5_学习者

    网页很漂亮啊 是微信端吗,? 如何判断图片拍摄时的角度,有代码吗

    2015-03-02 10:50

  • 伟子

    回复 h5_学习者:里面已经判断了拍摄的角度,也压缩了

    2015-03-02 12:21

  • 小闹

    回复 伟子:你好,保时捷的那个代码,如何处理的拍摄角度没有看的很明白,请问有没有关于拍摄角度的说明?

    2015-03-09 10:11

  • 半杯可乐

    这个貌似是通过type=file实现的? 直接给图片路径貌似无法实现。

    2015-06-16 07:58

  • Eric_ou

    回复 伟子:路径有问题了,可不可以给个新地址给我,谢谢!

    2016-04-28 18:11

llyzlc

llyzlc

多张图片怎么办啊,又不好循环添加data数据。。只能写死么
var data = {
numimg: uploadImgArr.length.toString(),
subject: document.getElementById("key").value,
author: returnItem("useracc"),
authorid: returnItem("uid"),
sid: returnItem("sessionid"),
message: document.getElementById("message").value,
img1: uploadImgArr[0].pic,
img2: uploadImgArr[1].pic,
img3: uploadImgArr[2].pic
};

aaaa

aaaa

你这个为什么后台接收不到数据,提示undefined index club

  • 多串君 (作者)

    我没有遇到这个问题,我帮你查了一下。看这个能不能解决http://www.jb51.net/article/30328.htm


    接收不到数据的话,先随便传点什么,看看是不是传递数据出错了。

    2015-01-29 20:14

  • aaaa

    好的,谢谢,我试试

    2015-01-29 20:21

  • aaaa

    回复 多串君:用mui.post和上面的例子可以,但是用5+里的这个就出现上面的那个提示,怎么解决


    //发送POST请求

    function MyXMLHttpRequest(myurl, mydata, callback) {


    //  alert("进入");  
    var myxhr = new plus.net.XMLHttpRequest();
    myxhr.onreadystatechange = function() {
    switch (myxhr.readyState) {
    case 0:
    console.log("xhr请求已初始化");
    break;
    case 1:
    console.log("xhr请求已打开");
    break;
    case 2:
    console.log("xhr请求已发送");
    break;
    case 3:
    console.log("xhr请求已响应");
    break;
    case 4:
    if (myxhr.status == 200) {
    console.log("xhr请求已成功" + myxhr.responseText);
    var a = JSON.parse(myxhr.responseText);
    console.log(a);
    console.log(myxhr.responseText + "3333");
    callback(a);
    } else {
    plus.nativeUI.toast("网络发生了错误!");
    console.log("xhr请求失败:" + myxhr.readyState);
    }
    break;
    }

    }

    myxhr.open("POST", myurl);
    // myxhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    myxhr.setRequestHeader("Content-Type", "text/html; charset=utf-8");
    // myxhr.setRequestHeader("Content-Type", "text/json");
    myxhr.send(mydata);

    2015-01-29 21:23

h5_学习者

h5_学习者

为什么我用你的代码,在苹果手机上图片的方向会转90度啊,求解?

  • 多串君 (作者)

    你看看楼上的伟子的评论, 他提出了解决办法。我没有对图片方向作调整。

    2015-02-02 14:54

自由森

自由森

500K 太大了

  • 多串君 (作者)

    我做的是压缩到500K了,上面图片处理的地方

    //生成比例

    var w = that.width,

    h = that.height,

    scale = w / h;

    w = 480 || w; //这里的480像素 你觉得还是大,你可以设置320,240 不过太小图片就破相了

    h = w / scale;

    2015-03-02 10:24

  • 自由森

    多谢答复,头疼呢,等着官方完善API也没消息。我在考虑用你这方法来一遍,还是直接换回phonegap

    2015-03-02 10:34

ggtiger

ggtiger

500K 太大了 流量伤不起

如果可以设置图片质量,大小缩小在100kb以内就好了。

hanxin

hanxin

html5画布不给力啊,一张图片500k 1920*1080 压缩后更大了! 用的方法 一样:

ctx.drawImage(img,0,0,1920,1080,0,0,destw,desth);

用C#就能做到几十k,还清晰,靠,html5 怎么搞的这么挫!

hanxin

hanxin

我都可以保存为jpg啊

太阳光

太阳光

$files =$_POST['files1'];
$files1 = substr($files1,22); //这代码坑了不会PHP的同学

ggtiger

ggtiger

我压缩成20kb都能看。

anke

anke

在iphone js压缩图片有问题,encode 有大小限制,我在iPhone5上测试,拍照有有10几兆,最后encode 会丢失数据。
http://stackoverflow.com/questions/26152652/ios-html5-canvas-todataurl

huiyichengyi

huiyichengyi

后台我用的是.net写的 我通过这种方式为什么拿不到上传的文件?我通过取Request集合中的Files文件集合拿的 拿到文件数量为0
HttpFileCollection MyFilecollection = Request.Files;
int cout = MyFilecollection.Count;
MyFilecollection[0].SaveAs(Server.MapPath("~/upload/" + MyFilecollection[0].FileName));

求解释

  • 太阳光

    你理解错了。这不是普通的Files对象,只是普通的一个变量参数Request.form("files1")

    2015-04-22 08:48

  • 妙妙

    我现在也遇到这个问题,用mui.post过去,后台api取不到数据,请问你现在解决了吗

    2015-09-13 10:46

  • 老牛在路上

    回复 妙妙:这就不是一个文件,只是一个参数。用request.form["files1"]

    2016-03-03 17:08

xunxun

xunxun

发现img.onload方法不执行,是什么原因啊

水粑粑

水粑粑

以下是我编码成base64的字符串...不知道C#如何解码,求赐教

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAKAAeADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+HNG80ASOwjUKIo/vqrLuYrhvlQKWZggDAPyQOd3oRaitI66dbaXT6P1ad9/uPP54ygo/Zdmk32emlu+mt0vRFlVaHBIXY7Y+YAI65ORlCjJn+IoQDgHgAY2VZq9297rrZdv61ZcEo8zsktX6a6r9PktxFeREMQdgh3EYJGTtClic5IBAVWbPGUyq5ppvVp2u1pZJNK2tkr+n46OxLnKzSbtayV9LbpNaJ/56jRJlgAzPIpAI+UuqRhCCOAQVVWUDcilBtwABinP1jdrsrWvu+rWjWr66aaJe8krPma3VtEk1fXbpq7v8UOE7FfIRW8hGIQhSmS6gsCMkZbaC3G7KDkqprnl8XNo7yb31ejs9PW+97JnRCvUjFUlf2UJylFL+afxt6faai3t8KVu6ArHtLg7kAKBdhAVipyQckEEbuFG8ncMsTnWDbTd2t1ZO3a/RPfZ9vvMpySabTUo7aKybb7ro3vfWzenSeKZVJLMVyd2SNrmXO2MuQQTtABVTlV2ZUf324qTV1drbr3f9f5HoYerKMOZ3TlqmtOnp3Vkr37rS5X+WZ23AzEYMhYu4IySOMnqVODlcn+I7RiXdR91O1k7WvZNPbv6a/ccEpzlXm6knJyfvS6cvZ7PZa21a2sWHkQHy0O5eScZDAk9GLMNq7QgJGOFXO9gBWTlKVr7fj009NLNWXXubzryjHkhtyySX+JWe/dWW3T744XVGyVdZFO7zFLlBtXIBB52qMnsDnJ6c2pNRvZNrz11fnbttdPS9icLKMVLmT95uzSe13vqlt6Pu7KxM8eNwB2bCwRcsPMwxUEYZQQcZXC4HDLtUYFqa37b6XWq2e/X0/wA+mpTSu1fbSyevX8X33fXqRqWUuGjZZA3zNlmVh8gODwFIX5wQrDaQScZYU6jkvjdkrW07W666+trnNTk4ylHVNybduu/T13a6LS5MCQQ+W5Q7imN5UqUJD5LbWU/MhAypUE7MZyqO1rvbV7Jdl8/6W7R6rSfLU+0orq2/hS7q2iV1K7v5bNZ3YFnP31KbSXOFddpDqzttDBGCjb1CcrtXNxd1rqu2je3XVbP02vqYVajuru71irSulfX79dNvvGOMKCHIDKFZQuW+U7gARghmDFiA2AOQvJw0tVrqlpr6a/lrsc01dpqT1VnZN9btbP7+v3hguqsQEK4xu3EOoO0HJyykHjbz1IBAYkTOck19rRPV6262/wCD33NJQTht71r79O66dv8AgjDuRULHBDKWOWZlztCqxJO0FEBUADocsMqSRlzOyVnqld21/B9On6mLXs3GaSTuveTu/K66N/1sSEyynG3KoFAYqvQKWGSvzNgBmAZiOG25yRW75oxvLs9NW29Pv0Tt+OrNHW9tJKa5uRpxule/Lpb7rb9fQlNtLMS2S0sYOEKZ4+YfM4Uq7BScgjcXxuPLGoUnB3Wz0e19X3d9L9La7GtWnGuuabk5QWjalZW+eit/TtdPtrefIdAVPzNG20gjK8kOmVVi2QgC5yDwOCLqSm7tt8umi31Xl80/kPCONKXLHSS5ndLurNNX3smvJX7krWV0dkMRCRoCu5dxXBB6kK2W4EZC7VjI3SBSXYZqPMnbS+tmnrrZ7tadOnkbyr1GowU/cg7KKu9rLS19bJ3fzsI1tI6nzMbVeRhhTgyfICDuBDM2XYkkk5GQAdwcoRjDTTXr3el+tvv0MXiHLdySUmred+22q36dCaO3eaRF273VVwGKkKpchNwILFiynbJkeXksOCucZQTu1pun62a6O+t7W38iHWcpJ9Y2d+q28l0+7yEFpMVfdMFOclZX8po2JA3fO67nZkiUhRuI2qQc/LCgk7tbKysmtfn0d356PW5tTxFWSdpve7Wjs7avqrta90tyddGkm226wzeYoVkhWNxKzgjaIsRs5aY/MvG0gkZI2gylsmtLtbX01aer723/AMjWdq8I03K7V5NXXNdXlfu++n4E8HhjWJ90ltpl/NGrFZGjtZ5H3fcwSI2OC6spcqIlJBMjMWzUXT5uW7b1926SWl3pe+m+vy6o454epS55SjZRV7uyVtuvnvr6gvhHW3Kn+yNXLFQwVdPugFDLGQ3mvEoMW+aIhsqWVxnb5iYio0mmuXd7vp0ff5b9VpdmUGpSjK920ummrTvsK9hf6bKjy2z2585k8uWB94aJDMHImEYeNo5BIJYt8YiYZIO1acdUnf0s1Z9OiWnZGlSrpyOStGScraXatKP3NK2r37WtFevd39xHMRGFWPagTpGEMRUt82VdVUIuTvCZ5ZjuaoU4t37bLXpZ3vfu3frt6venWq1ZJyknCySWnTXpdP8AC9+juQfZTEqMxRxnbg7uOA7KA2QASCQQcZxxk7gN82yVtknotH8/m9dTdpJc3uyVttb6a+Wn6/IvG7vFs3hEJkhkHlsSqsV3AxYbCnC4fywdwUFtyMpYVcIpauyavt003vs9G+ltTKpVk1J04K0uVN6bWaXRvTp0+dig1qBBE8hDMJQxdX+cBg33AMDBHGcsVOSecYam3Ly22VnfXX3ns11vcxSUaackrqTvZ6q9323Vt72v5JDre0kclYnCIm9iocovzOm8kjhgTxtGQAQw2qGzpFJyV1q072W9rW6vffVq35aUqrV4qTUf5U9G99dde67b3VxfsTg7Cdg53syFUHChWCYByoGCAVI+b5xuwdpqNry2XTTX7/S5DTfMtGm5J3SXS62bTW3mMit3hkLSny3XpGVIIKumCAMJtOZCdrMOMEEEEZXS+BO1n26u/wAvK3Rb33VOU4PWVrJrlV9du1r63tvvsWXgO5CoyjkMXSMFwwZiDgAFjwVMmM5O3AwMNSk5R332e21tXqvktb9NWicWuaKktU5a2V366W+aa66N7Alk6I7kFxGNv7xdoUtnChA+Sx4JU527FOSM5ckkk1Z3trdbeWiutfX72c1OmpKS0ur3vHs7/wBfkiAocOGT92ww6mNSJCOR8h3IpHyqzA4K4YBWJJxlJxtZJ97u766Jfq3boawqVYc0FPli7KUeWylZ3Sevkmlq+2l0SA7n+VZhw65ClhvC5zhmAUMWHGflQAhGYMrVCCnFbWv318r8vl39SW5Jtq9mvRejTtZaXbstNiUI2TGsZmYLvLgMWVUDgkMvGArZwzAYACD5cDOUNLWV0nZ66Lfq781/600mpiIqDTg5XXKpXta11t5bPvpby

  • 半杯可乐

    上面不是有C#代码吗?

    2015-06-17 08:18

  • 水粑粑

    我看到有 但是我转换老失败

    2015-06-17 08:59

  • 半杯可乐

    回复 水粑粑:那你就还种方式,

    /// <summary>

    /// base64编码的字符串转为图片

    /// 2015-4-22

    /// zlz

    /// </summary>

    /// <param name="base64">base64图片编码</param>

    /// <returns></returns>

    public Bitmap base64StringToImage(string base64)

    {

    try

    {

    base64 = base64.IndexOf("data:image/jpeg;base64,") > -1 ? base64.Replace("data:image/jpeg;base64,", "") : base64;

    byte[] arr = Convert.FromBase64String(base64);

    MemoryStream ms = new MemoryStream(arr);

    Bitmap bmp = new Bitmap(ms);


            Bitmap bmp2 = new Bitmap(bmp.Width, bmp.Height, PixelFormat.Format16bppRgb555);  
    Graphics g = Graphics.FromImage(bmp2);
    g.DrawImage(bmp, new Rectangle(0, 0, bmp.Width, bmp.Height));
    g.Dispose();
    bmp.Dispose();//释放bmp文件资源
    ms.Close();
    return bmp2;
    }
    catch (Exception ex)
    {
    return null;
    }
    }

    2015-06-18 08:43

  • 水粑粑

    回复 半杯可乐:好的 3Q 我试试

    2015-06-23 15:52

  • 水粑粑

    回复 半杯可乐: 报错: Base-64 字符数组或字符串的长度无效。 加密是用的楼主的代码


    var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8 );


    无奈了...

    2015-06-23 15:56

  • 半杯可乐

    你调试下,感觉是你写的代码有问题,是否base64传到后台是否正确。

    2015-06-24 07:53

  • 炭烧红豆奶茶

    前面这段 data:image/jpeg;base64, 是不包含在base64编码里面的,好像是这段,自己调试一下试试

    2016-03-25 09:14

cj

cj

那个旋转90度的问题时怎么解决的呢?

  • 多串君 (作者)

    评论里面有人发了答案

    2015-06-17 17:52

cj

cj

您好,请问在三星上时如何兼容的呢?
input type=‘file’ 标签在应用中打不开。。。。请问您是如何解决的呢?

failedtocopy

failedtocopy

如果需要把截图获取到的base64数据生成成图片,保存到相册里面,这个要怎么实现呢,代码如下:
> view = Activity.getCurrentFocus();
plus.android.invoke(view,"setDrawingCacheEnabled",true);
plus.android.invoke(view,"buildDrawingCache");
//对view截图,存入bitmap中
bitmap = plus.android.invoke(view,"getDrawingCache");
if(null != bitmap){
console.log("截图成功");
try{
str = new StringBuffer();
bStream = new ByteArrayOutputStream();
bitmap.compress(bBitmap.CompressFormat.PNG, 100, bStream);
bStream.flush();
bStream.close();
bytes = bStream.toByteArray();
str.append(Base64.encodeToString(bytes, Base64.NOWRAP));
} catch(e){
console.log(e.message);
}
var imgFile = "data:image/png;base64," + str.toString();
var filename = "order
" + id.toString() + ".jpg";

    plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS, function(fs) {  
        fs.root.getFile('test.png', {"create": true},   
        function(fileEntry) {  
            console.log(fileEntry.fullPath);  
            fileEntry.createWriter(function(writer) {  
            writer.onwrite = function(e) {  
                console.log("Write data success!");  
            };  
            writer.write( str.toString() );  
            });  
            },function(e){  
                console.log("getFile failed: " + e.message);  
            });  
            }, function(e) {  
                console.log("Request file system failed: " + e.message);  
        });  

1.能生成一段base64编码 <img src="data:image/png;base64,/9j/4AAQSkZJRgABA ... "/> 这样也能生成图片,还能运行到console.log("Write data success!"); 这一句,但是到响应的目录下面找不到文件,怎么回事呢?

  1. 如果可以的话 能不能直接把在相册目录里面创建一个文件,然后把base64内容填进去,生成图片呢?
枫桥居APP

枫桥居APP

有bug

_AJian_

_AJian_

谢谢分享

DCloud_heavensoft

DCloud_heavensoft

  • 枫桥居APP

    会自动修正照片方向吗

    2015-08-26 15:57

huyong1978

huyong1978

在iphone上压缩后,图片出现变形,高度没按等比生成,全部挤在顶部了,求解决

leejm

leejm

php 服务器端怎么弄 多图上传的时候

妙妙

妙妙

请问怎么用mui.ajax提前图片到asp.net mvc api上呢,
我使用mui.post base64数据到asp.net mvc api上,后台根本收不到参数

roblade

roblade

文件上传后再次下载下来能复原原来的照片质量吗?

SkyGrass

SkyGrass

先备注,我有预感,快用到了。

chrome

chrome

请教一个问题:
包含这段代码的html页面,如果是从网上加载的,就会导致img.onload不执行,
而如果包含这段代码的html本身就在本地,就没有问题了。

http://ask.dcloud.net.cn/question/11337,这个是我提的问题,不知道表达清楚了么。

近水楼台
函数无机

函数无机

C# 服务端代码:

    [HttpPost]  
    public JsonResult Upload2() {  
        string dirPath = HttpContext.Server.MapPath("~/_Temp/");              
        if (!Directory.Exists(dirPath))  
            Directory.CreateDirectory(dirPath);  
        //System.IO.File.WriteAllText(dirPath + _FName + ".txt", str);  
        MemoryStream ms = null;                          
        try  
        {  
            byte[] byts = new byte[Request.InputStream.Length];  
            Request.InputStream.Read(byts, 0, byts.Length);  
            String strOrg = Server.UrlDecode(System.Text.Encoding.UTF8.GetString(byts));  
            String[] ss = strOrg.Split('&');  
            foreach (String str in ss)  
            {  
                if (String.IsNullOrEmpty(str))  
                    continue;  

                String _FName = new System.Random().Next(100000, 999999).ToString();  
                System.IO.File.WriteAllText(dirPath + _FName + ".txt", str);  
                String _Ext = str.Substring(str.IndexOf("/") + 1, str.IndexOf(";base64,") - str.IndexOf("/") - 1);  
                String _Img = str.Substring(str.IndexOf(";base64,") + 8);  
                byte[] arr = Convert.FromBase64String(_Img);  
                ms = new MemoryStream(arr);  
                System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);  
                switch (_Ext.ToUpper())  
                {  
                    case "PNG":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Png);  
                        break;  
                    case "JPG":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Jpeg);  
                        break;  
                    case "JPEG":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Jpeg);  
                        break;  
                    case "BMP":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Bmp);  
                        break;  
                    case "GIF":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Gif);  
                        break;  
                    case "ICON":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Icon);  
                        break;  
                    case "TIFF":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Tiff);  
                        break;  
                    case "WMF":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Wmf);  
                        break;  
                    case "EMF":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Emf);  
                        break;  
                    case "EXIF":  
                        bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Exif);  
                        break;  
                }  
                ms.Close();  
                ms.Dispose();  
                ms = null;  
            }  

            return Json(new  
            {  
                success = true,  
                message = "上传成功."  
            }, JsonRequestBehavior.AllowGet);  
        }  
        catch (Exception ex)  
        {  
            return Json(new  
            {  
                success = false,  
                message = Helper.GetExceptionFullMessage(ex)  
            }, JsonRequestBehavior.AllowGet);  
        }  
        finally {  
            if (ms != null)  
            {  
                ms.Close();  
                ms.Dispose();  
                ms = null;  
            }  
        }            
    }  

        function imgupgrade() {  
            plus.nativeUI.showWaiting();  
            var url = 'http://192.168.1.112/hb/Fm/Archives/Upload2';  
            var dataType = 'json';  
            //发送数据    
            var data = {  
                files1: f1 //base64数据          
            };  
            mui.post(url, data, success, dataType);  
        }  
        //成功响应的回调函数  
        var success = function(response) {   
            plus.nativeUI.closeWaiting();  
            if (response != null && !response.success) {  
                alert(response.message);  
            }  
        }
东哥的苹果

东哥的苹果

一般很友好的做法是从相册选取图片,然后裁剪,最后上传(京东,淘宝,支付宝等混合开发出来的app都这么做),感觉压缩图片不好,那么问一下,选取图片后裁剪怎么做?

周羊羊

周羊羊

拍照之后APP会重启 怎么办?

墓志家族

墓志家族

怎么用不了

3***@qq.com

3***@qq.com

先留名、以后会用到

明明航

明明航 - 你好

if(files.length < 2) 这一步报错(拍照上传)
Can't find variable: files

雷斯巴能

雷斯巴能 - 雷斯巴能

谢谢谢谢

ronger

ronger

学习一下

rabet

rabet - 开发,技术服务

1***@qq.com
1***@qq.com
1***@qq.com

1***@qq.com

index

1***@qq.com

1***@qq.com - nacissus

php端应该这样
<?php
namespace Home\Controller;
use Think\Controller;
//登录控制器
class TestController extends Controller {
//显示登录页面并验证
public function index(){

    $s=dirname(__FILE__); //获的服务器路劲  
    $time =time();        //获得当前时间戳  
$files =$_POST['files1'];  
$key = str_replace(' ','+',$files);  
     $files1 = substr($key,23);  //百度一下就可以知道base64前面一段需要清除掉才能用。  
 //解码  
     $tmp  = base64_decode($files1);  
     //$fp=$s."/uploads/".$time.".jpg";  //确定图片文件位置及名称  
     //写文件  
    // file_put_contents( $fp, $tmp);  //给图片文件写入数据  

file_put_contents("./mylog.jpg",$tmp);
echo 1;
}

}

2***@qq.com

2***@qq.com

图片旋转90度的没找到解决方案。。。。

s***@163.com

s***@163.com

真不错,希望有源码。

前端_小白

前端_小白

楼主,压缩之后的大小如何获取???

味道898

味道898

看一下

1***@qq.com

1***@qq.com - 11

你好,我用vue打包app的调用摄像头有问题,调用了toLocalURL这个方法后下面的代码没有执行,是不是出了什么问题

llyzlc

llyzlc

压缩后上传的是base64,怎样不上传base64,而是上传的file

  • 多串君 (作者)

    没有上传file啊。你看到哪一行?我这个说的是上传,其实就是用ajax 发送一段base64数据。

    就是这个

    //发送数据

    var data = {

    files1:f1 //base64数据

    };

    2015-01-14 16:33

  • llyzlc

    我知道,我是想知道能不能把base64保存成png后,再上传图片,而不是上传post参数base64

    2015-01-14 17:17

  • 唯变

    js不能转文件流, 本地文件js能操作就危险了.所以不允许.

    2015-10-10 11:02

  • 炭烧红豆奶茶

    回复 llyzlc: 服务器架设个FTP , JS有上传ftp的api

    2016-03-25 09:15

该问题目前已经被锁定, 无法添加新回复