图片旋转上传

手机可以横着拍照,也可以竖着拍照,但通过手机拍照上传的时候,Uploader并不知道这个照片的拍摄方向。

典型的问题是,在iPhone中竖着拍照上传,Uploader会横过来显示照片,服务端接收到的照片也是横过来的。

为解决这个问题,我们为Uploader增加了一个整数型属性Rotate,用于设置图片的旋转角度,可选值有:

1 顺时钟旋转90°
2 顺时钟旋转180°
3 顺时钟旋转270°

通常在iPhone上竖方向拍照上传的时候,需要将Rotate属性设置为1。

要实现图片的旋转上传,单单设置Rotate属性是不够的,我们还需要将Uploader的Incremental属性设置为True,所以和上一节一样,我们只能用submitAjaxForm函数提交表单,不过代码依旧很简单。

一个例子

希望图片顺时钟旋转90°上传,并将宽度压缩为400个像素,高度则等比例压缩,设计步骤:

1、在"d:\web"目录下,建立一个子目录lib,在这个目录建立一个文本文件,文件名为"ajaxform.js",文件内容和上一节完全相同:

function submitForm(){
    show("tst1",2000);
    var result = submitAjaxForm('form1','afterSubmit');
}

function afterSubmit(result){
    hide("tst1");
    if (result=='OK') {
        show("tst2");
        location="upload.htm";
    }
    else{
        show("tst3",2000);
    }
}

2、的HttpRequest事件代码如下,和上一节相比,只是增加了一行代码(加粗显示的这行)而已:

Select Case e.Path
    Case "addnew.htm"
        Dim wb As New weui
        wb.AddForm("","form1","receive.htm")
        With wb.AddInputGroup("form1","ipg1",
"
文件上传")
            With .AddUploader("up128",
"
照片",True)
                .AllowDelete = True
'
允许删除
                .Incremental = True
'
允许重复选择文件或连续拍照
               
.ScaleWidth = 400 '自动压缩图片宽度为400个像素,高度等比例压缩
                
.Rotate = 1 '顺时钟旋转90°
            End With
        End With
        With wb.AddButtonGroup("form1","btg1",True)
            .Add("btn1", "确定", "button").Attribute= "onclick='submitForm()'" '调用js函数上传
        End With
        wb.AddToast("","tst1", "正在上传",1)
        wb.AddToast("","tst2", "上传成功",0)
        wb.AddToast("","tst3", "上传失败",0).Icon= "warn"
        wb.AppendHTML("<script src='./lib/ajaxform.js'></script>") '引入脚本文件
        e.WriteString(wb.Build) '生成网页
   
Case "receive.htm"
        For Each key As String In e.Files.Keys
            For Each fln As String In e.Files(key)
                e.SaveFile(key,fln,"d:\web\uploadfiles\" & fln)
'
保存接收到的文件
            Next
        Next
        e.WriteString("OK")

End
Select


本页地址:http://www.foxtable.com/mobilehelp/topics/0257.htm