Hbuilder webApp開発(四)アルバム/写真-画像アップロード


プロジェクトをする過程で、アルバムや写真を撮ってからアップロードする必要があります.例えば、ユーザーの顔を修正したり、プロジェクトの画像をアップロードしたりします.
効果図
ユーザーのアイコンをクリックすると、actionSheetがポップアップされ、アルバムや写真を撮ることを選択します.画像を選んだ後、アップロード方法を呼び出し、画像をアップロードします.アップロードする前に画像を圧縮しました.
プロセスの使用
アクションシートをイジェクト
/*      */
        document.getElementById('headImage').addEventListener('tap', function() {
            if (mui.os.plus) {
                var a = [{
                    title: "  "
                }, {
                    title: "       "
                }];
                plus.nativeUI.actionSheet({
                    title: "      ",
                    cancel: "  ",
                    buttons: a
                }, function(b) { /*actionSheet       */
                    switch (b.index) {
                        case 0:
                            break;
                        case 1:
                            getImage(); /*  */
                            break;
                        case 2:
                            galleryImg();/*    */
                            break;
                        default:
                            break;
                    }
                })
            }
        }, false);

写真アップロード
//  
        function getImage() {
            var c = plus.camera.getCamera();
            c.captureImage(function(e) {
                plus.io.resolveLocalFileSystemURL(e, function(entry) {
                    var s = entry.toLocalURL() + "?version=" + new Date().getTime();
                    uploadHead(s); /*    */
                }, function(e) {
                    console.log("        :" + e.message);
                });
            }, function(s) {
                console.log("error" + s);
            }, {
                filename: "_doc/head.png"
            })
        }

アルバムセレクトからアップロード
//      
        function galleryImg() {
            plus.gallery.pick(function(a) {
                plus.io.resolveLocalFileSystemURL(a, function(entry) {
                    plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
                        root.getFile("head.png", {}, function(file) {
                            //     
                            file.remove(function() {
                                console.log("file remove success");
                                entry.copyTo(root, 'head.png', function(e) {
                                        var e = e.fullPath + "?version=" + new Date().getTime();
                                        uploadHead(e); /*    */
                                        //       src
                                        //        ,      ,            
                                    },
                                    function(e) {
                                        console.log('copy image fail:' + e.message);
                                    });
                            }, function() {
                                console.log("delete image fail:" + e.message);
                            });
                        }, function() {
                            //     
                            entry.copyTo(root, 'head.png', function(e) {
                                    var path = e.fullPath + "?version=" + new Date().getTime();
                                    uploadHead(path); /*    */
                                },
                                function(e) {
                                    console.log('copy image fail:' + e.message);
                                });
                        });
                    }, function(e) {
                        console.log("get _www folder fail");
                    })
                }, function(e) {
                    console.log("        :" + e.message);
                });
            }, function(a) {}, {
                filter: "image"
            })
        };

画像のアップロードと圧縮
//      
        function uploadHead(imgPath) {
            console.log("imgPath = " + imgPath);
            mainImage.src = imgPath;
            mainImage.style.width = "60px";
            mainImage.style.height = "60px";

            var image = new Image();
            image.src = imgPath;
            image.onload = function() {
                var imgData = getBase64Image(image);
                /*         */
//              mui.ajax("      ", {
//                  data: {
//                      
//                  },
//                  dataType: 'json',
//                  type: 'post',
//                  timeout: 10000,
//                  success: function(data) {
//                      console.log('    ');
//                  },
//                  error: function(xhr, type, errorThrown) {
//                      mui.toast('    ,     !');
//                  }
//              });
            }
    }
        //       base64
        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            var width = img.width;
            var height = img.height;
            // calculate the width and height, constraining the proportions
            if (width > height) {
                if (width > 100) {
                    height = Math.round(height *= 100 / width);
                    width = 100;
                }
            } else {
                if (height > 100) {
                    width = Math.round(width *= 100 / height);
                    height = 100;
                }
            }
            canvas.width = width;   /*         */
            canvas.height = height; /*         */
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height); /*  */
            var dataURL = canvas.toDataURL("image/png", 0.8);
            return dataURL.replace("data:image/png;base64,", "");
        }   

まとめ
使用中、使用プロセスが非常に明確であることがわかります.ある程度は原生iOSの使用よりも簡単です.コードダウンロードアドレス:私をクリックしてください!