php拍照从手机相册中选择,微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例...
本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法。分享给大家供大家参考,具体如下:
目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档
1.预览网络图片http链接的
2.预览本地图片wenxin:// 链接的
一、预览图片接口
注:
1.预览图片接口目前只支持微信手机版
2.预览图片只支持http连接,对于weixin:// 无法预览
3.预览图片的地址需要进行加密处理,尤其路径中有中文的情况下,需要使用window.encodeURI()方法
实例说明:
//1.预览图片 会显示下载失败
wx.previewImage({
current:'http://localhost/content/images/冰皮月饼.jpg',
urls:[
'http://localhost/content/images/冰皮月饼.jpg'
]
});
//预览图片成功
wx.previewImage({
current:'http://localhost/content/images/%E5%86%B0%E7%9A%AE%E6%9C%88%E9%A5%BC.jpg',
urls:[
'http://localhost/content/images/%E5%86%B0%E7%9A%AE%E6%9C%88%E9%A5%BC.jpg'
]
});
自定义预览网页中,指定的图片实例:
var imgList=$('.row img');
var urlList=[];
imgList.each(function(){
var url='http://'+location.host+$(this).attr('src');
//对url中的中文进行处理
url=window.encodeURI(url);
urlList.push(url);
});
//1.预览图片接口目前只支持微信手机版
//2.预览图片只支持http连接,对于weixin:// 无法预览
wx.previewImage({
current:urlList[0],
urls:urlList
});
二、从拍照或手机相册中选择图片,预览本地图片
1.返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片,链接地址都是 weixin://resourceid/xxxx
2. localId 可以用于微信手机版图片显示(目前PC版不可用)
实例1:
//2.选择图片单个图片
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds;
// 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
// localId 可以用于微信手机版图片显示(目前PC版不可用)
$('#imgTarget').attr('src',localIds[0]);
}
});
实例2:
//选择多个图片
wx.chooseImage({
count:4,
sizeType:['original'],
sourceType:['album', 'camera'],
success:function(res){
var localIds=res.localIds;
for (var i = 0; i < localIds.length; i++) {
var localId=localIds[i];
addImg(localId);
}
}
});
//添加图片的row
function addImg(src){
var col=$('
col.addClass('col-xs-6 col-md-3');
var a=$('');
a.addClass('thumbnail');
var img=$('');
img.attr('src',src);
a.append(img).append(src);
col.append(a);
$('.row').append(col);
}
希望本文所述对大家JavaScript程序设计有所帮助。
php拍照从手机相册中选择,微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例...相关推荐
- Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏预览
需求 Taro框架中 Image 和 Video 组件预览图片/视频时 添加明显的关闭按钮 以关闭全屏观看,避免用户直接操作返回后导致页面空白(原有消息记录消失 - 重新进入项目首页) [补充] 全屏 ...
- 微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
- H5开发:使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述 使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片 点击图片查看大图,点击图片右上角"×"删除此图 点击 ...
- 微信小程序选择图片(相册中选择/相机拍摄)
微信小程序中关于选择函数有专门的函数: wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照. 参数 Object object 属性 类型 默认值 必填 说明 ...
- Android7.0以上如何获取头像(拍照或者从相册中选择)
大概的流程 动态权限管理 创建布局文件,这里不多说了 拍照的实现 2.1创建存放图片的文件夹 2.2将文件夹路径转换为uri 2.3隐式启动相机的Activity,uri作为intent的一个参数. ...
- 兼容Android 11 相机拍照,从相册中选择,裁剪图片
由于android 11对存储空间进行了更新,导致无法进入裁剪或者裁剪后无法保存,返回路径等问题. android 10以下可以参考:android 相机拍照,从相册中选择,裁剪图片 前面部分和之前的 ...
- Android 拍照以及相册中选择(适配高版本)————上传多张照片之压缩处理、在线预览可伸缩放大(二)
______ Introduction ______ 前言 上一篇文章刚给大家总结完,关于上传头像的功能.此文章所述 主要是关于上传头像的具体流程以及如何对照片做裁剪处理,回调给控件显示:当然重中之重 ...
- Android中拍照(相册中选择)并上传图片功能(包括动态获取权限)
作为新手小白,为了实现这个拍照和相册选取图片并上传功能,确实花费了很多时间,因为实现不容易,所以记录下来,一和大家分享,二为之后学习做个备忘. 一.实现效果 二. 整体思路 Android手机客户端, ...
- android点击选择相册,android: 从相册中选择照片
虽然调用摄像头拍照既方便又快捷,但并不是每一次我们都需要去当场拍一张照片的. 因为每个人的手机相册里应该都会存有许许多多张照片,直接从相册里选取一张现有的照 片会比打开相机拍一张照片更加常用.一个优秀 ...
最新文章
- Java 类不可被继承的几种方法
- C++基本序列式容器效率比较
- 【译】A Beginner-Friendly Introduction to Containers, VMs and Docker
- unity3d___UGui中如何创建loading...进度条
- HTTP Cookie
- 一个简单的空间配置器
- 简单的java恶搞小病毒_恶搞电脑病毒代码有哪些
- 网站Webshell大马密码极速暴力爆破工具-cheetah
- CSS标签选择器→教你如何使用
- SQL Server索引 (原理、存储)聚集索引、非聚集索引、堆 第一篇
- 仿QQ登录界面UI设计
- 学习云客户端安装流程
- SQL select详解(基于选课系统)
- 手机罗盘(指南针)校准方法
- 屏幕适配入门-了解基本概念-图片适配
- 「STL详解」RB-tree 红黑树
- hadoop是什么?新手自学hadoop教程(一)
- System.Web.Security
- Dell服务器硬件检测工具.利器简单易上手
- 计算机科学个人陈述中文,计算机专业个人陈述范文
热门文章
- 多重集表示合json数据_计数DP(划分数,多重集组合数)
- ftp主动和被动模式_【扫盲】FTP基础知识详解
- 【css】页面出现两个滚动条以及只有一半页面显示内容的解决方法
- 【Linux】Linux 简单操作指令之磁盘管理
- 最新最全的 Android 开源项目合集(一)
- Windows和Linux的编译理解
- Oracle Study之--ORA-12537(TNS:connection closed) 错误案例
- 2016.8.11 DataTable合并及排除重复方法
- DOMContentLoaded 与onload区别以及使用
- Android 占位符 %1$s %1$d