使用HTML5+调用手机摄像头和相册

最新推荐文章于 2021-06-04 09:25:12 发布

特立独行的Mr高

最新推荐文章于 2021-06-04 09:25:12 发布

阅读量949

点赞数

分类专栏： H5 文章标签： H5开发

本文链接：https://blog.youkuaiyun.com/JianNingGao/article/details/85166863

版权

H5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在移动端实现图片上传、预览、压缩及删除的功能。通过使用plus.io和plus.zip API，实现了本地文件系统的读取、图片的Base64编码转换、图片压缩以及图片的预览和删除。此外，还提供了调用摄像头拍照和从相册选择图片的选项。

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

//图片显示
函数showPics（url，name）{
   //根据路径读取到文件
plus.io.resolveLocalFileSystemURL（url，function（entry）{
   entry.file（function（file）{
       var fileReader = new plus.io. FileReader（）;
       fileReader.readAsDataURL（file）;
    fileReader.onloadend = function（e）{
   var picUrl = e.target.result.toString（）;
   var picIndex = $（“＃picIndex”）。val（）;
          var nowIndex = parseInt（picIndex）+1;
          $（“＃picIndex”）。val（nowIndex）;
          var html ='';
          html + ='<div class =“image-item”id =“item'+ nowIndex +'”>';
          html + ='<div class =“image-close”onclick =“delPic（'+ nowIndex +'）”> X </ div>';
          html + ='<div> <img src =“'+ picUrl +'”class =“upload_img”style =“width：100％; height：100％;”/> </ div>';
          html + ='</ div>';
          html + = $（“＃image-list”）。html（）;
          $（ “＃图像列表”）HTML（HTML）;
    }
   };
}）;
}

//删除图片
function delPic（nowIndex）{

    $（“＃item”+ nowIndex +“”）.remove（）;
}
    //压缩图片
function compressImage（url，filename）{
var name =“_ doc / upload /”+ filename;
plus.zip.compressImage（{
src：url，// src :( String类型）压缩转换原始图片的路径
dst：name，//压缩转换目标图片的路径
质量：40，//质量:(数字类型）压缩图片的质量。取值范围为1-100
overwrite：true // overwrite :(布尔类型）覆盖生成新文件
}，
function（zip）{
   //页面显示图片
   showPics（zip.target，name）;
}，function （错误）{
plus.nativeUI.toast（“压缩图片失败，请稍候再试”）;
}）;
}

   //调用手机摄像头并拍照
函数getImage（）{
var cmr = plus.camera.getCamera（）;
cmr.captureImage（function（p）{
plus.io.resolveLocalFileSystemURL（p，function（entry）{
compressImage（entry.toLocalURL（），entry.name）;
}，function（e）{
plus.nativeUI.toast（“read取拍照文件错误：“+ e.message）;
}）;
}，function（e）{
}，{
filter：'image'
}）;
}
//从相册选择照片
function galleryImgs（）{
   plus.gallery.pick（function（e）{
       var name = e.substr（e.lastIndexOf（'/'）+ 1）;
   compressImage（E，名称）;
   }，function（e）{
   }，{
   filter：“image”
   }）;
   }

//点击事件，弹出选择摄像头和相册的选项
   函数showActionSheet（）{
   var bts = [{
   title：“拍照”
   }，{
   title：“从相册选择”
   }];
   plus.nativeUI.actionSheet（{
   cancel：“取消”，
   按钮：bts
   }，
   function（e）{
   if（e。
   的getImage（）;
   } else if（e.index == 2）{
   galleryImgs（）;
   }
   }
   ;

}