素材牛VIP会员
jssdk里面的拍照接口怎么调用?
 15***by  分类:Html5  人气:933  回帖:2  发布于6年前 收藏

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

 标签:html5javascript

讨论这个帖子(2)垃圾回帖将一律封号处理……

Lv5 码农
最***哥 JS工程师 6年前#1

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

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

Lv5 码农
躺***上 技术总监 6年前#2

步骤一:绑定域名

步骤二:引入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属性显示图片
            }
        });
    });
    

});
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取