起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 23906|回复: 11

[分享] WeX5V3.1手机拍照例子-后台ASP.NET

  [复制链接]

36

主题

94

帖子

190

积分

初级会员

Rank: 2

积分
190
QQ
发表于 2015-4-1 12:38:15 | 显示全部楼层 |阅读模式
亲测以下代码:
WeX5:——不管3.1需要不需要加引用,反正我是都加了。。。像素设置为1024*768,quality就可以调高到100,图片体积在200k以内。所以控制拍照神器的关键参数不是quality,而是高宽。
        var $ = require("jquery");
        var justep = require("$UI/system/lib/justep");
        require("$UI/system/lib/cordova/cordova");
        require("res!./img");
        var client2service = require("../_js/client2service");
        require("css!$UI/okchexl/device/common/pub").load();
        require("cordova!org.apache.cordova.camera");
        require("cordova!org.apache.cordova.inappbrowser");
        require("cordova!org.apache.cordova.file");
        require("cordova!org.apache.cordova.file-transfer");

Model.prototype.modelLoad = function(event) {
                //this.loadFoodData();
                 var me = this;
                document.addEventListener("deviceready", onDeviceReady, false);
                // 加载完成
                function onDeviceReady() {
                        me.comp("cameraBtn").set({disabled: false});
                       
                        if(localStorage.getItem(me.STORE_ID) !== "")
                                me.comp("fileData").loadData(JSON.parse(localStorage.getItem(me.STORE_ID)));
                }
        };
       
        //拍照
        Model.prototype.cameraBtnClick = function(event) {
                $("#operateLabel").text("开始拍照!");
                $("#resultLabel").text("");

                var data = this.comp("fileData");
                var self = this;
                function onSuccess(imageURI) {
                data.newData({index : 0});
                        data.setValue("filePath", imageURI);
                        data.setValue("fileName", imageURI.substr(imageURI.lastIndexOf('/') + 1));
                        data.setValue('createTime', justep.Date.toString(new Date(), justep.Date.DEFAULT_FORMAT ));
                        $("#resultLabel").text("成功"+imageURI);
                    self.uploadImage(imageURI);
        }
                function onFail(message) {
                        $("#resultLabel").text("失败:"+message);
                }                 
                navigator.camera.getPicture(onSuccess, onFail, {
                        quality : 80,
                        sourceType : 1,
                        targetWidth : 1024,
                        targetHeight : 768
                // 0、2为从相册文件中选择,1为拍照
                });
        };
       
        Model.prototype.uploadImage = function(imageURI) {
                //var deferred = when.defer();
                var options = new FileUploadOptions();
                options.fileKey = "okchexlx5file";// 用于设置参数
                options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
                // 如果是图片格式,就用image/jpeg,其他文件格式上官网查API
                options.mimeType = "image/jpeg";
                // 这里的uri根据自己的需求设定,是一个接收上传图片的地址
                var uri = encodeURI(client2service.BASE_URL+"SetImageUpload.ashx?jsoncallback=?");
                options.chunkedMode = false;
                var params = new Object();
                params.id = "1";
                params.name = "test";
                options.params = params;
                var ft = new FileTransfer();
                function success(result) {
                        //deferred.resolve(imageURI);// 改变执行状态
                        //navigator.notification.progressStop();
                        alert("上传成功!");
                }
                function fail(message) {
                        alert("上传失败!" + JSON.stringify(message));
                }
                // 上传回调
                //ft.onprogress = showUploadingProgress;
                //navigator.notification.progressStart("", "当前上传进度");
                 
                ft.upload(imageURI, uri, success, fail, options);
        }
       
        //显示图片
        Model.prototype.fileListClick = function(event) {
                $("#operateLabel").text(" ");
                $("#resultLabel").text("");

                var data = this.comp("fileData");
                var url = data.getValue("filePath");

                if (justep.Browser.isX5App && justep.Browser.isAndroid) {
                        window.open(url,"_system");
                        //window.open(url,"_blank");
                        //window.open(url, '_blank', 'toolbarposition=top,location=no,enableViewportScale=yes');
                } else {
                        window.open(url, '_blank', 'toolbarposition=top,location=no,enableViewportScale=yes');
                }
        };
       
        Model.prototype.uploadBtnClick = function(event) {};
         

        //清空历史记录
        Model.prototype.deleteBtnClick = function(event) {
                $("#operateLabel").text("清空历史记录 ");
                $("#resultLabel").text("");

                this.comp("fileData").clear();
                localStorage.setItem(this.STORE_ID, "");

        };

        //关闭功能,将记录存入内存
        Model.prototype.backBtnClick = function(event) {
                localStorage.setItem(this.STORE_ID, JSON.stringify(this.comp("fileData").toJson(false)));
                justep.Portal.closeWindow();
        };

ASP.NET
——NND,只要写文件做日志看出错误的端倪了!!!那就是服务端的上传限制和手机拍照神器的不匹配!
/// <summary>
    /// SetImageUpload 的摘要说明
    /// </summary>
    public class SetImageUpload : BaseAshxX5
    {
        private string _log = "";
        public override void ProcessRequest(HttpContext context)
        {
            HttpPostedFile _upfile = context.Request.Files["okchexlx5file"];
            if (_upfile == null)
            {
                _log = "4 请选择要上传的文件";
                ResponseWriteEnd(context, "4");//请选择要上传的文件  
            }
            else
            {
                //_upfile.SaveAs(HttpContext.Current.Server.MapPath("~/_upload/vehicle/logo" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg"));
                    
                string fileName = _upfile.FileName;//获取文件名
                string suffix = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower();
                int bytes = _upfile.ContentLength;//获取文件的字节大小  

                if (suffix != "jpg")
                {
                    _log = "2 只能上传JPG格式图片";
                    ResponseWriteEnd(context, "2"); //只能上传JPG格式图片
                }
                else if (bytes > 2048 * 2048)
                {
                    _log = "3 图片不能大于4M";
                    ResponseWriteEnd(context, "3"); //图片不能大于3M
                }
                else
                {
                    //保存图片
                    _upfile.SaveAs(HttpContext.Current.Server.MapPath("~/_upload/vehicle/logo" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg"));
                    _log = "1 上传成功";
                    ResponseWriteEnd(context, "1"); //上传成功  
                }
            }
        }

        private void ResponseWriteEnd(HttpContext context, string msg)
        {
            StreamWriter sw = new StreamWriter(HttpContext.Current.Server.MapPath("~/_upload/vehicle/log" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".txt"), false);
            sw.WriteLine(_log);
            sw.Flush();
            sw.Close();
            sw = null;
            context.Response.Write(msg);
            context.Response.End();
        }

    }

附加说明: PhoneGAP Camera Api简单介绍
Camera选择使用摄像头拍照,或从设备相册中获取一张照片。图片以base64编码的
字符串或图片URI形式返回。
方法:
1. camera.getPicture 拍照获取相册图片
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
cameraSuccess:提供图像数据的onSuccess回调函数。
cameraError:提供错误信息的onError回调函数。
cameraOptions:定制摄像头设置的可选参数
2. camera.cleanup 清除拍照后设备的缓存图片
navigator.camera.cleanup( cameraSuccess, cameraError );
3.cameraOptions参数:
定制摄像头设置的可选参数。
quality : 存储图像的质量,范围是[0,100]。
destinationType :选择返回数据的格式。
sourceType :设定图片来源。data:image/jpeg;base64,
allowEdit :在选择图片进行操作之前允许对其进行简单编辑。(好像只有ios支持)
encodingType :选择返回图像文件的编码方encodingType: Camera.EncodingType.JPEG
targetWidth :以像素为单位的图像缩放宽度指定图片展示的时候的宽度
targetHeight :以像素为单位的图像缩放高度指定图片展示的时候的高度
saveToPhotoAlbum:拍完照片后是否将图像保存在设备上的相册
mediaType 设置选择媒体的类型
cameraDirection 选择前置摄像头还是后置摄像头

评分

参与人数 2威望 +13 收起 理由
Masion + 10
暗夜的忧伤 + 3 很给力!

查看全部评分

2

主题

7

帖子

32

积分

新手上路

Rank: 1

积分
32
QQ
发表于 2015-4-2 21:35:41 | 显示全部楼层
很不错
回复

使用道具 举报

33

主题

213

帖子

1158

积分

金牌会员

Rank: 6Rank: 6

积分
1158
QQ
发表于 2015-4-2 21:50:55 | 显示全部楼层
非常好
回复

使用道具 举报

377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
发表于 2015-4-12 11:27:25 | 显示全部楼层
为什么在我的JS代码中有错误提示说
'FileUploadOptions' is not defined
FileTransfer' is not defined
是我有什么文件没有引用过来吗??
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

2

主题

441

帖子

2572

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2572
发表于 2015-4-12 11:47:08 | 显示全部楼层
很好!!!
回复

使用道具 举报

34

主题

147

帖子

368

积分

中级会员

Rank: 3Rank: 3

积分
368
QQ
发表于 2015-9-17 16:58:55 | 显示全部楼层
能否上传demo吗?
回复 支持 反对

使用道具 举报

17

主题

80

帖子

230

积分

中级会员

Rank: 3Rank: 3

积分
230
QQ
发表于 2015-12-20 14:17:55 | 显示全部楼层
回复四楼,需要选择本地对话框插件
回复 支持 反对

使用道具 举报

12

主题

25

帖子

89

积分

初级会员

Rank: 2

积分
89
QQ
发表于 2015-12-20 16:53:40 | 显示全部楼层
我的有好多未定义,麻烦共享一下client2service QQ截图20151220165244.jpg
回复 支持 反对

使用道具 举报

18

主题

59

帖子

153

积分

初级会员

Rank: 2

积分
153
QQ
发表于 2015-12-22 10:25:34 | 显示全部楼层
学习一下!
回复

使用道具 举报

0

主题

27

帖子

107

积分

初级会员

Rank: 2

积分
107
QQ
发表于 2016-3-8 14:24:36 | 显示全部楼层
能否上传demo,万分感谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-5-7 13:21 , Processed in 0.066786 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表