Cordova各个插件使用介绍系列（八）—$cordovaCamera筛选手机图库图片并显示

最新推荐文章于 2021-01-12 00:42:34 发布

weixin_30747253

最新推荐文章于 2021-01-12 00:42:34 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/xiaojun-zxj/p/4709812.html

本文介绍了如何在ionic项目中利用cordova-plugin-camera插件从手机相册选择并上传图片，具体步骤包括下载插件、引用、编写JS代码以及HTML页面展示。通过示例代码展示了实现过程，并提供了实际应用的参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/

1.首先下载这个插件：

可以在package.json文件中添加“cordova-plugin-device"来添加，也可以直接在ngCordova官网里找到相应的命令来下载，

命令为：

cordova plugin add cordova-plugin-camera

2.在ionic项目中要使用这个插件的页面相应的控制器里添加相应的插件名来引用，记得在依赖项里要加ngCordova,不然会出错。

3.在控制器里写入相应的js代码（这些代码在ngCordova官网插件的应用上有详细的方法调用，根据具体的需要来写自己所需要的功能的代码）我这个代码是来实现页面上要显示7张从手机相册中选择的图片，

js代码如下：

$scope.takePicture = function (img) {
    var options = {
        quality: 75,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 500,
        targetHeight: 500,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false
};

    $cordovaCamera.getPicture(options).then(function (imageData) {
            // alert(imageData);
if (img == 1) {
                $scope.data.IDCardImage1 = imageData;
                $scope.imgURI1 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 2) {
                $scope.data.IDCardImage2 = imageData;
                $scope.imgURI2 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 3) {
                $scope.data.Qualified = imageData;
                $scope.imgURI3 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 4) {
                $scope.data.CredentialImage = imageData;
                $scope.imgURI4 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 5) {
                $scope.data.CarInfoImage1 = imageData;
                $scope.imgURI5 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 6) {
                $scope.data.CarInfoImage2 = imageData;
                $scope.imgURI6 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 7) {
                $scope.data.CarInfoImage3 = imageData;
                $scope.imgURI7 = "data:image/jpeg;base64," + imageData;
            } else {
                return "";
            }
        }
    );
};
$scope.take = function () {
    this.takePicture();
}

4.html页面的代码如下（其中ng-src中要把图片转化为base64格式，上传到服务器）我这里只贴出了显示两张图片的代码，其他的类似：

<div class="row">
    <div class="col padding" ng-click="takePicture(1)">
        <img ng-src="https://img-blog.csdnimg.cn/2022010617064794297.jpeg"
style="border: 1px dashed gray;width: 100px;height: 100px;background-color: #f0f0f0"/>
    </div>
    <div class="col padding" ng-click="takePicture(2)">
        <img ng-src="https://img-blog.csdnimg.cn/2022010617064796864.jpeg"
style="border: 1px dashed gray;width: 100px;height: 100px;background-color: #f0f0f0"/>
    </div>
    <div class="col padding"></div>
</div>

注：第一次在这里分享自己遇到的问题和解决方案，有不足的地方欢迎大家纠正、评论以及提问，有更多精彩技术分享会一直更新http://www.ncloud.hk/

转载于:https://www.cnblogs.com/xiaojun-zxj/p/4709812.html