前言
之前写过一篇微信JS-SDK的使用方法,可进行参考
https://www.cnblogs.com/fozero/p/10256862.html
配置并调用公众号接口权限
1、配置权限微信公众号接口,添加如下权限
jsApiList: [
'chooseImage',
'getLocalImgData',
]
2、拍照或选取图片,拿到base64位图片地址
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
// 获取本地图片
wx.getLocalImgData({
localId: res.localIds[0], // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
}
});
}
});
这里有个坑:
微信公众号选择图片显示报错wx.getLocalImgData is not a function
调用之前需在jsApiList[]中添加getLocalImgData权限
添加之后还是无法获取权限,后发现微信js版本问题(在jweixin1.0.0无法使用)
替换使用最新版本
http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
使用阿里oss浏览器端sdk上传图片
3.1、文档查看
https://www.alibabacloud.com/help/zh/doc-detail/32069.htm?spm=a2c63.p38356.a3.7.26855ac51uabIJ
https://github.com/ali-sdk/ali-oss
3.2、浏览器引用
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.1.0.min.js"></script>
let client = new OSS({
accessKeyId: result.AccessKeyId,
accessKeySecret: result.AccessKeySecret,
stsToken: result.SecurityToken,//安全性考虑,建议通过服务器获取该token
endpoint: '<oss endpoint>',
bucket: '<Your bucket name>'
});
//storeAs表示上传的object name , file表示上传的文件
client.multipartUpload(storeAs, file).then(function (result) {
console.log(result);
}).catch(function (err) {
console.log(err);
});
multipartUpload第二个参数支持blob和file对象,这里需要注意的是我们在微信公众号拿到的图片地址是base64位,上传之前将其转换成blob或者file对象格式
// base64转blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
//base64转file对象
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
坑:
现在最新sdk版本是6.1.0,可以通过https://github.com/ali-sdk/ali-oss/tree/master/dist获取,由于是网上找的代码,版本原因
之前版本获取oss对象的方式是new OSS.Wrapper ,最新版本已换成new OSS,传递参数也变了,region已经换成endpoint
let client = new OSS.Wrapper({
region: 'oss-cn-hangzhou',
accessKeyId: '',
accessKeySecret: '',
bucket: ''
})
完整代码
<img style="width:300px;" class="J_img" src="" alt="">
<div class="J_upload">上传图片</div>
// 图片上传
$('.J_upload').click(function () {
// 选择手机图片
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
// 获取本地图片
wx.getLocalImgData({
localId: res.localIds[0], // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
let client = new OSS({
accessKeyId: '',
accessKeySecret: '',
// stsToken: result.SecurityToken,
endpoint: '',
bucket: ''
});
var fileName = "test/test.jpg"
var _file = dataURLtoFile(localData, fileName);
var _blob = dataURLtoBlob(localData);
client.multipartUpload(fileName, _blob)
.then(function (result) {
$('.J_img').attr('src', 'https://diankr.oss-cn-beijing.aliyuncs.com/' + result.name+'?i='+Math.random());
}).catch(function (err) {
console.log('err', err);
});
// base64转blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
//base64转file对象
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
}
});
}
});
})
最后
使用js在前端对base64、file、Blob进行互相转换
1、base64、file对象互转
https://www.cnblogs.com/MainActivity/p/8550895.html
function dataURLtoFile(dataurl, filename) {//将base64转换为文件
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//将图片转换为Base64
function getImgToBase64(url,callback){
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL('image/png');
callback(dataURL);
canvas = null;
};
img.src = url;
}
getImgToBase64('img/test.png',function(data){
var myFile = dataURLtoFile(data,'testimgtestimgtestimg');
console.log(myFile);
});
2、Base64、 Blob互转
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
function blobToDataURL(blob, callback) {
let a = new FileReader();
a.onload = function (e) { callback(e.target.result); }
a.readAsDataURL(blob);
}