摄影圈子 hqmana.com

uniapp h5+ camera, recording function realization

uniapp h5+ 拍照、录音功能实现

uniapp 功能实现


提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

记录一些uniapp的功能实现

uniapp 扫码、拍照_mtl1994的博客-CSDN博客_uniapp 扫码

[HTML5+ API Reference](https://www.html5plus.org/doc/h5p.html)


提示:以下是本篇文章正文内容,下面案例可供参考

一、拍照

1.Call up the camera to take a photo

代码如下:示例

// 获取摄像头管理对象 getCamera 参数 index Specifies the index value of the camera to get,1Indicates the main camera,2Indicates the secondary camera.If not set, the system default main camera will be used.
// Android cannot turn on the front camera by default ios可以
const cmr = plus.camera.getCamera()
// 字符串数组,摄像头支持的拍照分辨率
const res = cmr.supportedImageResolutions[0]
// 字符串数组,摄像头支持的拍照文件格式
const fmt = cmr.supportedImageFormats[0]
// 进行拍照操作
cmr.captureImage((path) => {
    // this.compressImage(path)
    // path 图片地址
    console.log(path)
},
(error) => {
    console.log('Capture image failed: ' + error.message)
}, {
    resolution: res,
    format: fmt
})
属性类型作用可取值备注
cropCameraCropStylesConfigure cropped imagesAfter setting the crop picture item,After taking a photo, you will enter the crop editing interface,Return to the cropped image after confirmation.
filenameStringThe path where the photo or video files are savedA specific file name can be set(如"_doc/camera/a.jpg");You can also just set the path,以"/“The end indicates the path(如”_doc/camera/"). If the file name is not set or the set file name conflicts, the file name is automatically generated by the program.
formatStringThe file format of the photo or video可通过Camera对象的supportedImageFormats或supportedVideoFormats获取,If the set parameter is invalid, the system default value will be used.
indexStringThe camera used by default for taking pictures or videosThe camera number used by default in the photo or video interface,1Indicates the main camera,2Indicates the secondary camera
videoMaximumDurationNumber视频长度单位为秒(s),小于等于0Indicates that the video length is not limited. 默认值为0(Unlimited video length). 注意:Only when called to shoot video(startVideoCapture)时有效.
optimizeBooleanWhether to optimize imagesAutomatically adjust the orientation of the picture,On some devices, the image orientation may not be correct,This parameter will configure whether to automatically adjust the image orientation. 可取值: true - Automatically adjust picture orientation; false - 不调整. 默认值为true. 注意:Automatic adjustment of image orientation will consume some system resources,It may cause the callback trigger timing to be delayed after taking a photo,将此值设置为falseThen the delay problem can be avoided.
resolutionStringThe resolution used for taking pictures or videos可通过Camera对象的supportedImageResolutions或supportedVideoResolutions获取,If the set parameter is invalid, the system default value will be used
popoverPopPositionThe indicator area pops up on the photo or video interfaceFor large screen devices egiPad,The photo or video interface is a pop-up window,At this time, the pop-up window position can be set through this parameter,其为JSON对象,格式如{top:“10px”,left:“10px”,width:“200px”,height:“200px”},The default popup position is centered on the screen

2.Manage system photo albums,支持从相册中选择图片或视频文件、Save pictures or video files to albums and other functions

代码如下:示例

// Select a file from the system gallery(图片或视频) option GalleryOptions
plus.gallery.pick((res) => {
    console.log(res.files); 
}, function(e) {
    console.log('取消选择图片');
}, {
    filter: 'image',
    multiple: true,
    maximum: 3 // optional quantity
})

GalleryOptions

属性类型作用可取值备注
animationBooleanWhether to display the animation of the system album file selection interfacetrue/false平台支持

Android - 2.2+ (不支持) :

忽略此参数,无动画效果.


iOS - 4.3+ (支持) :

支持动画效果.
confirmTextString确认按钮文字When this parameter is not passed in,Use the default confirm button text“确定”.

注意:HBuilderX3.1.5+版本支持.
cropGalleryCropStylesConfigure cropped imagesConfigure cropped images
editableBooleanWhether to support editing picturestrue/false注意:HBuilderX3.1.5+版本支持
filenameStringSelect the path to save the fileSome systems cannot directly use the path of the system album,At this point, you need to save the selected file to a directory accessible to the application,The path to save the file can be set with this parameter. If the path includes the file suffix name,It indicates the specified file path and name,Otherwise just specify the file save directory,File names are automatically generated.
filterGalleryFilterSelect the file type filter in the albumThe file types that can be selected in the system album selector,Can be set to select only image files(“image”)、视频文件(“video”)或所有文件(“none”),默认值为“image”.
maximumNumberMaximum number of selected imagesOnly valid when multiple selection is supported,取值范围为1到Infinity,默认值为Infinity,That is, there is no limit to the number of pictures that can be selected. If the set value is invalid, the default value is usedInfinity.
multipleBooleanWhether to support multiple selection of picturesMultiple pictures can be selected from the system album,选择图片后通过GalleryMultiplePickSuccessCallbackThe callback returns the selected image.
onmaxedFunctionExceeded maximum number of selected images eventWhen using the album to select multiple pictures,可通过maximumThe property sets the maximum number of images to select,This event is fired when the number of user action selections is greater than this time.
permissionAlertBooleanWhether to check permissions可取值:


true - It was detected that the user is not authorized to access the album,A prompt box will pop up to guide the user to authorize

false - It was detected that the user is not authorized to access the album,Trigger the error callback,No interface prompts

默认值为false.
popoverPopPositionThe album selection interface pops up the indicating areaFor large screen devices egiPad,The album selection interface is a pop-up window,At this time, the pop-up window position can be set through this parameter. 其为JSON对象,格式如{top:“10px”,left:“10px”,width:“200px”,height:“200px”},All values ​​are pixel values,The position of the upper left coordinate relative to the container,The default popup position is centered on the screen.
selectedArray[StringA list of selected image pathsOnly takes effect when multiple images are selected,The album selection interface will select the specified image path list. If the specified path is invalid,则忽略此项;If the specified number of paths exceedsmaximumIf the maximum number of selections specified by the property is exceeded, the pictures will not be selected.

二、压缩图片

1.uniapp 压缩图片

代码如下(示例):

uni.compressImage({
    
    src: url,
    quality: 50, // 图片质量
    width: 250, // 宽
    height: 320, // 高
    success: res => {
    
        console.log('compressImage', res.tempFilePath)
    },
    fail: (err) => {
    
        console.log(err.errMsg)
    },
    complete: () => {
    
        // uni.hideLoading();
    }
})

2.h5+压缩图片

代码如下(示例):

plus.zip.compressImage(
    {
        src: url, // src: (String 类型 )压缩转换原始图片的路径
        dst: url, // 压缩转换目标图片的路径
        quality: 90, // quality: (Number 类型 )压缩图片的质量.取值范围为1-100
        overwrite: true, // overwrite: (Boolean 类型 )覆盖生成新文件
        width: '250',
        height: '320'
    },
    (susses) => {
        console.log(susses)
        console.log(url)
    },
    (error) => {
        console.log(error)
    }
)

三、录音

1.uniapp 录音

uni.getRecorderManager() | uni-app官网


总结

注意事项

版权声明
本文为[mtl1994]所创,转载请带上原文链接,感谢
https://hqmana.com/2022/264/202209211816033290.html

Scroll to Top