H5app拍摄图片并预览和网页上传图片文件并预览

最新推荐文章于 2023-07-21 15:54:15 发布

仓底储备粮

最新推荐文章于 2023-07-21 15:54:15 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： H5 前端

本文链接：https://blog.csdn.net/qq_43466173/article/details/86747636

版权

本文详述了使用Hbuilder创建的APP拍摄图片并预览，以及网页中上传图片文件并预览的步骤，涵盖了H5前端开发中的图片处理技巧。

摘要由CSDN通过智能技术生成

本篇分别介绍，用Hbuilder打包的app拍摄图片并预览和网页上传图片并预览两种方式

如何上传图片到服务器

依赖：JQuery

Hbuilder App 拍摄图片并预览

html模块：

<div style="background-color: cadetblue;height: 100px;width: 100px" onclick="captureImage"></div>
<img src="" id=photo>

js模块：
function captureImage() {
  
    // 扩展API加载完毕，现在可以正常调用扩展API
    function onPlusReady() {
        console.log("plusready");
    }

    // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);

    var cmr = plus.camera.getCamera(); // 获取手机摄像头使用权限
    // 分别获取手机允许的照片像素和清晰度
    var res = cmr.supportedImageResolutions[0];
    var fmt = cmr.supportedImageFormats[0];
    console.log("Resolution: " + res + ", Format: " + fmt);
    cmr.captureImage(function (path) {