需求需要在用拍照功能上传图片时获取地址经纬度天气时间来添加到图片上，如图
要求用oss本身的方法上传，并且不调后端接口。
这里采用的是调高德接口拿到地址经纬度天气，然后通过oss拼接x-oss...来添加水印。
一.调取高德接口获取地址信息
由于我是用在微信小程序上的，所以需要现在高德官网上设置一下key。
1.获取key
注：可打开高德官网链接按照步骤获取key，或通过如下步骤获取
1、进入高德开放平台
2、没有账号进行注册｜有账号直接登录
3、点击右上角 控制台 -> 应用管理 -> 我的应用 -> 创建应用
4、点击当前创建的应用下的添加按钮，提交后即可获取key
2.获取并使用高德微信小程序js依赖文件amap-wx.js
1、高德相关下载：进入官网进行下载解压后即可得到
2.将js文件放到静态文件中，
3.在需要调用的地方引用
var myAmapFun = new amapFile.AMapWX({key:'高德Key'});
//获取地址信息
myAmapFun.getRegeo({
success: function(data){
//成功回调
},
fail: function(info){
//失败回调
console.log(info)
}
})
//获取天气
myAmapFun.getWeather({
success: function(data){
//成功回调
},
fail: function(info){
//失败回调
console.log(info)
}
})注意1：由于当前获取位置是在小程序内部，所以必须添加小程序所需的permission用于小程序获取用户地理位置授权。
原生微信小程序开发：在appjson中进行配置
{
"pages": ["pages/index/index"],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
获取的地址结果
天气结果
二、添加水印
upload方法
uploadFile_again(tempFileArray) { //文件上传接口
let that = this
console.log(112333, that.data.info);
wx.showLoading({
title: '上传中...',
})
let promiseArr = [];
for (let i = 0; i < tempFileArray.length; i++) {
promiseArr.push(new Promise((reslove, reject) => {
let data = tempFileArray[i]
wx.getImageInfo({
src: data.files[0],
success: function (image) {
api.uploadFile({
data: data,
success(res) {
let water_base64 = that.base64Encode('农户姓名：'+that.data.userName)
let yellow_base64 = that.base64Encode('|')
let water_address_base64 = that.base64Encode(that.data.address)
let water_LongitudeAndLatitude_base64 = that.base64Encode(that.data.LongitudeAndLatitude)
let water_time_base64 = that.base64Encode(that.data.currentTime)
let water_date_base64 = that.base64Encode(that.data.currentDate)
let water_day_weather_base64
water_day_weather_base64 = that.base64Encode(that.data.currentDay + ' ' + that.data.weather)
let url =''
if(image.width < image.height){
if(water_address_base64 && that.data.weather && water_LongitudeAndLatitude_base64){
url = that.data.fileDomian + res.fileName + '?x-oss-process=image/resize,w_600,m_lfit/sharpen,100/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_90,text_'+ water_time_base64 +',t_70,g_sw,x_10,y_180/watermark,type_d3F5LW1pY3JvaGVp,color_FFC031,size_90,text_'+ yellow_base64 +',t_90,g_sw,x_240,y_170/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_30,text_'+ water_date_base64 +',t_70,g_sw,x_270,y_240/watermark,type_d3F5LW1pY3JvaGVp,text_'+ water_day_weather_base64 +',t_70,g_sw,x_270,y_180,color_FFFFFF,size_30/watermark,type_d3F5LW1pY3JvaGVp,text_'+ water_address_base64 +',t_70,g_sw,x_10,y_125,color_FFFFFF,size_30/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_30,text_'+ water_LongitudeAndLatitude_base64 +',t_70,g_sw,x_10,y_70/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_30,text_'+ water_base64 +',t_70,g_sw,x_10,y_20'
}else{
url = that.data.fileDomian + res.fileName + '?x-oss-process=image/resize,w_600,m_lfit/sharpen,100/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_100,text_'+ water_time_base64 +',t_70,g_sw,x_10,y_100/watermark,type_d3F5LW1pY3JvaGVp,color_FFC031,size_100,text_'+ yellow_base64 +',t_90,g_sw,x_265,y_90/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_35,text_'+ water_date_base64 +',t_70,g_sw,x_290,y_160/watermark,type_d3F5LW1pY3JvaGVp,text_'+ water_day_weather_base64 +',t_70,g_sw,x_290,y_100,color_FFFFFF,size_35/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_35,text_'+ water_base64 +',t_70,g_sw,x_10,y_20'
}
}else{
if(water_address_base64 && that.data.weather && water_LongitudeAndLatitude_base64){
url = that.data.fileDomian + res.fileName + '?x-oss-process=image/resize,w_600,m_lfit/sharpen,100/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_50,text_'+ water_time_base64 +',t_70,g_sw,x_10,y_105/watermark,type_d3F5LW1pY3JvaGVp,color_FFC031,size_50,text_'+ yellow_base64 +',t_90,g_sw,x_140,y_100/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_20,text_'+ water_date_base64 +',t_70,g_sw,x_160,y_135/watermark,type_d3F5LW1pY3JvaGVp,text_'+ water_day_weather_base64 +',t_70,g_sw,x_160,y_105,color_FFFFFF,size_20/watermark,type_d3F5LW1pY3JvaGVp,text_'+ water_address_base64 +',t_70,g_sw,x_10,y_70,color_FFFFFF,size_20/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_20,text_'+ water_LongitudeAndLatitude_base64 +',t_70,g_sw,x_10,y_40/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_20,text_'+ water_base64 +',t_70,g_sw,x_10,y_10'
}else{
url = that.data.fileDomian + res.fileName + '?x-oss-process=image/resize,w_600,m_lfit/sharpen,100/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_50,text_'+ water_time_base64 +',t_70,g_sw,x_10,y_55/watermark,type_d3F5LW1pY3JvaGVp,color_FFC031,size_50,text_'+ yellow_base64 +',t_90,g_sw,x_140,y_50/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_20,text_'+ water_date_base64 +',t_70,g_sw,x_160,y_80/watermark,type_d3F5LW1pY3JvaGVp,text_'+ water_day_weather_base64 +',t_70,g_sw,x_160,y_50,color_FFFFFF,size_20/watermark,type_d3F5LW1pY3JvaGVp,color_FFFFFF,size_20,text_'+ water_base64 +',t_70,g_sw,x_10,y_10'
}
}
let name = res.fileName
let size = res.size; //大小
let sizeText = that.toKb(res.size); //大小
console.log('res>>>',res,url);
reslove({ url, name, size, sizeText });
},
fail(res) {
wx.hideLoading();
wx.showToast({
title: '上传失败',
icon: 'none'
})
}
})
}
})
}))
}这里分情况是因为要区分图片的尺寸来画不同的水印位置
三、添加水印转换base64
所以封装了一个文字转base64的方法。
// 将字符串编码为 Uint8Array
encodeString(str){
var utf8Array = [];
for (var i = 0; i < str.length; i++) {
var charCode = str.charCodeAt(i); // 获得字符的ASCII
if (charCode < 0x80) {
utf8Array.push(charCode);
} else if (charCode < 0x800) {
utf8Array.push(0xc0 | (charCode >> 6));
utf8Array.push(0x80 | (charCode & 0x3f));
} else if (charCode < 0x10000) {
utf8Array.push(0xe0 | (charCode >> 12));
utf8Array.push(0x80 | ((charCode >> 6) & 0x3f));
utf8Array.push(0x80 | (charCode & 0x3f));
} else {
utf8Array.push(0xf0 | (charCode >> 18));
utf8Array.push(0x80 | ((charCode >> 12) & 0x3f));
utf8Array.push(0x80 | ((charCode >> 6) & 0x3f));
utf8Array.push(0x80 | (charCode & 0x3f));
}
}
return new Uint8Array(utf8Array);
},
// 字符串转为base64
base64Encode(inputString) {
const keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-/=";
if(inputString){
let inputBytes = this.encodeString(inputString);
let output = "";
let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
let i = 0;
while (i < inputBytes.length) {
chr1 = inputBytes[i++];
chr2 = inputBytes[i++];
chr3 = inputBytes[i++];
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output +=
keyStr.charAt(enc1) +
keyStr.charAt(enc2) +
keyStr.charAt(enc3) +
keyStr.charAt(enc4);
}
let str = output.replaceAll('/','_')
// console.log('替换str',str);
str = str.replaceAll('+','-')
output = str
return output;
}
} 注意2：oss微信小程序过程中发现转了base64也添加不上去水印，然后发现官网上有这样的要求
完成！
注意：
之前以为图片水印和文字水印一样，只需要将图片转成base64拼接上去就可以了。实验证明不可以的，仔细看才发现是将图片上传到oss拿到图片名称，再将名称文字转成base64拼接。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
