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

Source: Internet
Author: User
Tags base64

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.