媒介
项目中碰到须要拔取照片上传的需求,由于网页运行在微信的浏览器内里,所以想到了用微信的 js-sdk 供应的拔取照片功用,来优化用户体验。
完成历程
1、拔取照片
这里运用微信 js-sdk 的 chooseImage
要领,获得照片在当地存储的 id,非常简朴:
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var localId = res.localIds[0];
}
)};
2、猎取照片数据
主如果猎取照片 base64
花样的数据用于上传,然则历程比较迂回,前后尝试了两种要领。
尝试一:设置 img
元素的 src
属性
依据微信的官方开辟文档,获得的 localId
能够直接作为 img
元素的 src
属性举行显现,因此起首想到的是在 img
的 load
事宜中组织 canvas
,然后猎取数据:
$('img.avatar-temp').on('load', function (e) {
var image = e.target;
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext('2d').drawImage(image);
var dataUrl = canvas.toDataURL();
});
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var localId = res.localIds[0];
$('img.avatar-temp').attr('src', localId);
}
)};
但是不幸的是,将 localId
设置进 src
以后,图片能显现,也没有报错,然则就是死活不触发 load
事宜,也查不到是什么缘由,因此此计划行不通。
尝试二:挪用 js-sdk 的 getLocalImgData
要领
再次查阅文档,得知另有 getLocalImgData
用于猎取当地图片数据,坚决尝试:
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var localId = res.localIds[0];
wx.getLocalImgData({
localId: localId,
success: function (res) {
var localData = res.localData;
}
)};
}
)};
如上,获得的 localData
即为拔取照片的 base64
花样的数据。这里有两个处所须要注重的:
1、iOS 体系内里获得的数据,范例为 image/jgp
,不知道是 bug 照样什么缘由,因此须要替代一下:
localData = localData.replace('jgp', 'jpeg');
2、安卓体系获得的数据,是没有 data:image/jpeg;base64,
前缀的。
3、上传照片
上传照片采纳 FormData API
组织表单数据的方法,在我的另一篇文章有讨论过,此处不再赘述。