javascript - jssdk里面的拍照接口怎么调用？

Question

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

Answer 1

步骤一：绑定域名

步骤二：引入JS文件

http://res.wx.qq.com/open/js/jweixin-1.0.0.js

步骤三：通过config接口注入权限验证配置

//  后台将配置变量载入前台
public function qrscan($openiddd = 0){ 
    include('Jssdk.php');
    //  传入appid和密钥
    $jssdk = new JSSDK("xxxxxxxxxx", "xxxxxxxxxxxxxxxx");
    $getAccessToken = $jssdk->getToken();                                    
    $signPackage = $jssdk->GetSignPackage();                   

    
    $this->assign('signPackage', $signPackage);
    $this->display("wxapi");
}

//  下面是html页面的配置和调用
wx.config({
    // 开启调试模式,调用的所有api的返回值会在客户端alert出来，
    //若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    debug: true,
    appId: '{$signPackage.appId}', // 必填，公众号的唯一标识
    timestamp: {$signPackage.timestamp}, // 必填，生成签名的时间戳
    nonceStr: '{$signPackage.nonceStr}', // 必填，生成签名的随机串
    signature: '{$signPackage.signature}',// 必填，签名，见附录1
    jsApiList: [
        'chooseImage',
        'previewImage'
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

步骤四：通过ready接口处理成功验证

wx.ready(function(){
    只要你wx.config里面的配置成功，这里就可以调用微信的各个接口了
    
    像这样,调用系统相册或者直接拍照
    
    $('.btn').on('click', function(){
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            }
        });
    });
    

});

Answer 2

2016-8-9更新：

这个答案被踩了几次，为了不让后来人误会，我觉得有必要声明下：
题主在题目中并没有指明是在微信开发环境下，而我个人因为才疏学浅从未做过微信中的开发，所以并没有理解jssdk的含义，导致了回答的内容和题主的意思并不一致。

本来想删掉这份回答，想了想之后觉得未来也许能给一些寻求js调用相册/相机的人产生一点点的帮助，所以并没有删除这篇答案。我只是尽可能的希望自己能够帮助到别人。

祝好。

以下是我的回答：

---

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;
}

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