Hbuilder WebApp Development (iv) Photo album/photo-upload __web

In the process of doing the project, you need to take photos from the album or photo, and then upload them, such as modifying the user's avatar or uploading the project pictures. Effect Chart

Click on the user avatar, pop-up Actionsheet, selected from photo albums or photos, select the image after the call upload method, upload pictures, before uploading a picture before the upload. Working with Processes Pop-up Actionsheet

/* click Avatar Trigger/document.getElementById (' Headimage '). AddEventListener (' tap ', function () {
                    if (Mui.os.plus) {var a = [{title: "Photo"}, {
                Title: "From the mobile phone album select"}]; Plus.nativeUI.actionSheet ({title: "Modify User Avatar", Cancel: "Cancel", but
                        TONS:A}, function (b) {/*actionsheet button click event/switch (B.INDEX) {
                        Case 0:break; Case 1:getimage ();
                        * * Photo/break;
                        Case 2:GALLERYIMG ()/* Open album * * break;
                    Default:break; }})}, false); 

Photo Upload

Photo
        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); /* Upload picture/
                }, Function (e) {
                    console.log ("Error reading photo file: + e.message);
                }"
            , function (s) {
                Console.log ("error" + s);
            }, {
                filename: "_doc/head.png"
            })
        }

upload from album selection

Local album selection function galleryimg () {Plus.gallery.pick (function (a) {Plus.io.resolveLocalF
                        Ilesystemurl (A, function (entry) {Plus.io.resolveLocalFileSystemURL ("_doc/", function (root) {
                            Root.getfile ("Head.png", {}, function (file) {//file already exists
                                File.remove (function () {console.log ("File Remove success"); Entry.copyto (Root, ' head.png ', function (e) {var e = E.fullpath + "? Versio
                                        n= "+ New Date (). GetTime (); Uploadhead (e); /* Upload Pictures///change large image preview of SRC//Currently only a picture, temporarily so processing, follow-up
                                        Required through standard component implementations}, function (e) {
 Console.log (' Copy image fail: ' + e.message);                                   });
                            The function () {console.log ("Delete image fail:" + e.message);
                        });  The function () {//file does not exist Entry.copyto (root, ' head.png ', function (e)
                                    {var path = E.fullpath + "? version=" + New Date (). GetTime (); Uploadhead (path);
                                    /* Upload picture */}, Function (e) {
                                Console.log (' Copy image fail: ' + e.message);
                        });
                    });
                    }, Function (e) {console.log ("Get _www folder Fail");
                }), function (e) {console.log ("read photo file Error:" + e.message);
            });
       }, function (a) {}, {         Filter: "Image"})}; 

picture upload and compress

Upload avatar 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);                  /* Here call the Upload interface///Mui.ajax ("Image upload Interface", {//Data: {////                  },//DataType: ' JSON ',//Type: ' Post ',//timeout:10000,//                  Success:function (data) {//Console.log (' upload succeeded ');//},// Error:function (XHR, type, Errorthrown) {//Mui.toast (' network exception, please try again later.
');
            //                  }
//              });
           Convert picture compression to 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 (w
                    Idth >) {height = math.round (height *= 100/width);
                width = 100; } else {if (height >) {width = Math.Round (width *= 100/height
                    );
                height = 100;   } canvas.width = width; /* Set the width of the new picture * * * canvas.height = height;
            /* Set the length of the new picture * * var ctx = Canvas.getcontext ("2d"); Ctx.drawimage (IMG, 0, 0, width, height);
            /* Drawing//var Dataurl = Canvas.todataurl ("Image/png", 0.8);
        Return Dataurl.replace ("Data:image/png;base64,", "");    }

Summary

In use, we can see that the process is very clear and, in a way, simpler than the use of native iOS.
Code Download Address: Please click on me.