Web SQL Database+mui上传图片

后台接口

//pathContent为网络图像文件转Base64生成的DataURL
public string getUrl(string pathContent)
        {
            int length = pathContent.Length;
            string comname = "";
            
            string base64 = pathContent.Substring(pathContent.IndexOf(",") + 1);
            try
            {
                string inputStr = base64;
                byte[] arr = Convert.FromBase64String(inputStr);
                comname = Guid.NewGuid().ToString() + ".png";
                MemoryStream ms = new MemoryStream(arr);
                AliyunOSS.PutObject(bucketName, "离线整改/" + comname, ms);
                ms.Close();
                
            }
            catch (Exception ex)
            {
                return ex.Message;
            }
            return "离线整改/" + comname;
        }

选择图片

//上传图片
document.getElementById('photo').addEventListener('tap', function(e) {
    if (mui.os.plus) {
        var buttonTit = [{
            title: "拍照"
        }, {
            title: "从手机相册选择"
        }];

        plus.nativeUI.actionSheet({
            title: "上传图片",
            cancel: "取消",
            buttons: buttonTit
        }, function(b) { /*actionSheet 按钮点击事件*/
            switch (b.index) {
                case 0:
                    break;
                case 1:
                    getImage(); /*拍照*/
                    break;
                case 2:
                    galleryImg(); /*打开相册*/
                    break;
                default:
                    break;
            }
        })
    }
});

// 拍照获取图片
function getImage() {
    var c = plus.camera.getCamera();
    c.captureImage(function(e) {
        plus.io.resolveLocalFileSystemURL(e, function(entry) {
            var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径                        
            setHtml(imgSrc);
            var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径 
            newUrlAfterCompress = compressImage(imgSrc, dstname);
            appendFile(dstname, imgSrc);
        }, function(e) {
            console.log("读取拍照文件错误：" + e.message);
        });
    }, function(s) {
        console.log("error" + s);
    }, {
        filename: "_doc/camera/"
    })
}
// 从相册中选择图片 
function galleryImg() {
    plus.gallery.pick(function(e) {
        for (var i in e.files) {
            var fileSrc = e.files[i];
            setHtml(fileSrc);
            var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径 
            newUrlAfterCompress = compressImage(e.files[i], dstname);
            appendFile(dstname, fileSrc);
        }
    }, function(e) {
        console.log("取消选择图片");
    }, {
        filter: "image",
        multiple: true,
        maximum: 5,
        system: false,
        onmaxed: function() {
            plus.nativeUI.alert('最多只能选择5张图片');
        }
    });
}

function setHtml(e) {
    var divHtml = "
";
    $("#imgDiv").prepend(divHtml);
}
var files = [];
// 添加文件 
var index = 1;
var newUrlAfterCompress;

function appendFile(p, fileSrc) {
    files.push({
        name: "img" + index, //这个值服务器会用到，作为file的key 
        path: p,
        fileSrc: fileSrc
    });
    index++;
}

//压缩图片，这个比较变态的方法，无法return 
function compressImage(src, dstname) {
    plus.zip.compressImage({
            src: src,
            dst: dstname,
            overwrite: true,
            quality: 20
        },
        function(event) {
            return event.target;
        },
        function(error) {
            console.log(error);
            return src;
        });
}
// 产生一个随机数 
function getUid() {
    return Math.floor(Math.random() * 100000000 + 10000000).toString();
}

离线保存

//上传文件
function upload() {
    for (var i = 0; i < files.length; i++) {
        var f = files[i];
        var img = f.fileSrc;
        //这样就获取到了文件的Base64字符串
        var base64 = getBase64Image(img);
    }
}
//网络图像文件转Base64
function getBase64Image(img) {
    var image = new Image();
    image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0);
        var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
        var dataURL = canvas.toDataURL("image/" + ext);
        saveImage(confirm_id, "整改确认", _localStorage.getItem("record_id"), "1", localStorage.getItem("realName"), dataURL);
    };
    image.src = img;
}

function saveImage(business_id, business_type, item_id, file_type, create_user, imageStr) {
    db.transaction(function(tx) {
        var guid = new GUID();
        var id = guid.newGUID();
        var create_date = getDate();
        tx.executeSql('insert into im_file values(?,?,?,?,?,?,?,?)', [id, business_id, business_type,
            item_id, file_type, create_user, create_date, imageStr
        ], imageSuccess, imageError);
    });
}

function imageSuccess(tx, rs) {
    files = [];
    index = 1;
    $("#imgDiv").find(".a-add").remove();
    $("#text-h").val('');
    GetConfirmItem();
    //启用下拉刷新
    plus.webview.currentWebview().setPullToRefresh({
        support: true,
        style: "circle",
        offset: '100px'
    });
}

function imageError(tx, error) {
    files = [];
    mui.alert("上传失败，错误信息：" + error.message);
    //console.log("上传失败，错误信息：" + error.message);
}