jssdk里面的调用本机已有照片以及拍照接口怎么调用?
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;
}
如果您觉得这段内容不错,请为我点个赞,我的个人网站:《听说》
步骤一:绑定域名
步骤二:引入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属性显示图片
}
});
});
});