jssdk里面的拍照接口怎么调用?

jssdk里面的调用本机已有照片以及拍照接口怎么调用?

已邀请:

sxzhustar

赞同来自:

js无法直接调用,请利用浏览器HTML相关标签操作,input[type="file"]可以实现上传:

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
<input type="file" accept="image/*;capture=camera"> 直接调用相机
<input type="file" accept="image/*" />  调用相机 图片或者相册
<input type="file" multiple accept="image/*" /> 调用相册

注意上面的某些accpet设置在一些android机浏览器上并不会挂起,比如调用相机。重点在于accept属性,大概兼容性参见这里《accept 兼容性》。

如果想通过js直接调用系统相机和相册是做不到,可以结合hybrid做(移动app内嵌网页,移动app给js注入调用相机/相册的接口,js调用接口,app挂起相册)。

input[type=file]中上传获取的图片(file),可以采用这种方式获得预览:

//file => input上传获取的文件(file),callback=> 回调函数
var readFile = function (file, callback) {
    var render = new FileReader();
    render.onload = function (e) {
        callback(render.result/*图片生成的DataURL,放到img.src使用即可*/, render, e);
    };
    render.readAsDataURL(file);
}

也可以采用这种方式进行压缩裁剪(android某些机器不支持):

var options = {
    imgWidth: 100,
    imgHeight: 100
};

//src是图片路径
var compressor = function (src, MIMEType, callback) {
    var img = new Image;
    img.onload = function () {
        var cvs = document.createElement('canvas');
        cvs.height = options.imgHeight;
        cvs.width = options.imgWidth;
        var context = cvs.getContext && cvs.getContext('2d');
        //使用canvas压缩图片
        if (!cvs.getContext) {
            callback();
            return;
        };

        //进行图片裁剪算法
        var drawInfo = vmUpload.drawImageInfo();

        //使用drawImage进行压缩,参考API:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
        context.drawImage(img,
            0,//左上角起始x轴
            0,//左上角起始y轴
            options.imgWidth,//在目标画布上绘制图像的宽度
            options.imgHeight,//在目标画布上绘制图像的高度
            0,//需要绘制到目标上下文中的x轴
            0,//需要绘制到目标上下文中的y轴
            options.imgWidth,//需要绘制到目标上下文中的源图像的矩形选择框的宽度
            options.imgHeight)//需要绘制到目标上下文中的源图像的矩形选择框的高度

        //压缩图片,MIME类型应该从文件读取
        callback(cvs.toDataURL(MIMEType, 0.6));
    };
    img.src = src;
}

如果您觉得这段内容不错,请为我点个赞,我的个人网站:《听说

要回复问题请先登录注册