Cordova-developing iOS apps with Cordova 5 (Get photos on your phone and edit them)

Source: Internet
Author: User

Using the Cordova can be very convenient to read the system album through the JS code photos, as with the use of camera cameras, the same need to add the camera plug-in first.
one, add camera pluginFirst we enter the directory where the project is located in the terminal, and then run the following command:
1 cordova plugin add cordova-plugin-camera
You can see that the camera plugin has been successfully added:


two, get photosWe can choose to read the picture from the Photo gallery (moment) or from the album.1. Get photos from "albums"
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 <!DOCTYPE html>            <title>Capture Photo</title>        <meta http-equiv="Content-type" content="text/html; charset=utf-8">        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>        <script type="text/javascript" charset="utf-8">            var pictureSource;            var destinationType;                        document.addEventListener("deviceready",onDeviceReady,false);                         //Cordova加载完成会触发            function onDeviceReady() {                pictureSource=navigator.camera.PictureSourceType;                destinationType=navigator.camera.DestinationType;            }                    //获取照片            function getPhoto(source) {                //quality : 图像的质量,范围是[0,100]                navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,                                            destinationType: destinationType.FILE_URI,                                            sourceType: source });            }                    //获取照片成功            function onPhotoURISuccess(imageURI) {                //打印出照片路径                console.log(imageURI);                var largeImage = document.getElementById(‘largeImage‘);                largeImage.style.display = ‘block‘;                largeImage.src = imageURI;            }            //获取照片是吧            function onFail(message) {                alert(‘获取失败: ‘ + message);            }        </script>        <body style="padding-top:50px">        <button style="font-size:23px;" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">            从“相簿”中获取照片        </button> <br>        "display:none;" id="largeImage" src="" />    </body>

2. Get Photos from Photo gallery (moments)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 <!DOCTYPE html>            <title>Capture Photo</title>        <meta http-equiv="Content-type" content="text/html; charset=utf-8">        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>        <script type="text/javascript" charset="utf-8">            var pictureSource;            var destinationType;                        document.addEventListener("deviceready",onDeviceReady,false);                        //Cordova加载完成会触发            function onDeviceReady() {                pictureSource=navigator.camera.PictureSourceType;                destinationType=navigator.camera.DestinationType;            }                    //获取照片            function getPhoto(source) {                //quality : 图像的质量,范围是[0,100]                navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,                                            destinationType: destinationType.FILE_URI,                                            sourceType: source });            }                    //获取照片成功            function onPhotoURISuccess(imageURI) {                //打印出照片路径                console.log(imageURI);                var largeImage = document.getElementById(‘largeImage‘);                largeImage.style.display = ‘block‘;                largeImage.src = imageURI;            }            //获取照片是吧            function onFail(message) {                alert(‘获取失败: ‘ + message);            }        </script>        <body style="padding-top:50px">        <button style="font-size:23px;" onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">            从“时刻”中获取照片        </button> <br>        "display:none;" id="largeImage" src="" />    </body>

Original from: www.hangge.com reprint please keep the original link: http://www.hangge.com/blog/cache/detail_1148.html

Cordova-developing iOS apps with Cordova 5 (Get photos on your phone and edit them)

Related Article

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.