解决webapp中使用cordova调用本地相册，在ios设备上无法显示图片的问题

最新推荐文章于 2024-03-31 11:32:20 发布

iOSTerry

最新推荐文章于 2024-03-31 11:32:20 发布

阅读量6.8k

点赞数

分类专栏： iOS码农文章标签： web app cordova

本文链接：https://blog.csdn.net/iOSTerry/article/details/77718922

版权

iOS码农专栏收录该内容

72 篇文章 1 订阅

订阅专栏

anjular.js不能调用原生app相机，遇到通过cordova的插件cordova-plugin-camera来调用

1我们先在项目中引入插件cordova plugin add cordova-plugin-camera把插件安装到项目中

2在html文件中布局点击按钮调用相机或相册关键代码如下：

<div data-role="page">

  <div data-role="header">

  </div>


    <div class=" has-header padding" align="center">
      <p>
        <button class="button button-positive" ng-click="loadTakeImage();">相机拍照</button>
        <button class="button button-calm" ng-click="loadImageLocal();">本地图片</button>
      </p>
    </div>


  <div data-role="content">
    <div class="has-header padding" align="center">

	//注意我们此处通过id=“”来绑定对应的dom
      <img style="display:none;width:240px;height:320px;"  id="myImage" src=""/>
      <img src="" id="myImageLocal" style="display:none;width:240px;height:320px;"/>
    </div>
  </div>
</div>

3在js文件中关键代码如下：

// 1.拍照并显示在屏幕
function loadImage() {
  navigator.camera.getPicture(onLoadImageSuccess, onLoadImageFail, {

    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.CAMERA

  });
}

//拍照成功后回调
function onLoadImageSuccess(imageURI) {

  // var smallImage = document.getElementById('getImageLocal');
  // smallImage.style.display = 'none';
  var smallImage = document.getElementById('myImage');
  smallImage.style.display = 'block';
  smallImage.src = "data:image/jpeg;base64,"+imageURI;
  $log.log("图片链接",imageURI)

}


//2.获取本地图片并显示在屏幕
$scope.loadImageLocal = function () {

  navigator.camera.getPicture(onLoadImageLocalSuccess, onLoadImageFail, {
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY
  });
}

//本地图片选择成功后回调此函数
function onLoadImageLocalSuccess(imageURI) {

  var smallImage = document.getElementById('myImageLocal');
  smallImage.style.display = 'block';
  smallImage.src = "data:image/jpeg;base64,"+imageURI;
  $log.log("图片链接",imageURI)

}
//所有获取图片失败都回调此函数

function onLoadImageFail(message) {

  navigator.notification.alert("操作失败，原因：" + message, null, "警告");

}
注意事项：destinationType为获取的图片链接格式
其中Camera.DestinationType.DATA_URL为base64格式，接收时我们通过
 smallImage.src = "data:image/jpeg;base64,"+imageURI;来让html页面识别
这个url（ios推荐实用此方法！）
Camera.DestinationType.FILE_URI为图片本地路径，接收时我们通过
 smallImage.src = imageURI;来让html页面识别
这个url（此方法在安卓设备上正常运行，在ios设备上无法显示图片，ios不允许直接访问路径）