奮斗的七月
因?yàn)轫?xiàng)目中需要給圖片加水印陪毡，但是原生實(shí)現(xiàn)其他需要安卓和ios兩端進(jìn)行開發(fā)绪杏，成本有些大，最終選擇阿里云的圖片加水印方法進(jìn)行實(shí)現(xiàn)
阿里云的圖片加水印很方法击蹲，里面可以加文本和圖片署拟，一張圖可以加好幾種不同的水印，用起來(lái)很方法歌豺，代碼如下：
//---圖片加水印
setImageUrl() {
//--要加水印的文本--地址信息
let detailMsg = "陜西省西安市灞橋區(qū)浐灞生態(tài)區(qū)世博大道與香湖灣五路碧桂園香湖灣1號(hào)";
let arr = [];
if (detailMsg) {
if (detailMsg.length > 20) {
detailMsg = detailMsg.replace(/(.{20})/g, "$1,");
arr = detailMsg.split(",");
arr.reverse();
} else {
arr = [detailMsg];
}
}
//--要加水印的文本--需要在最上面加一個(gè)時(shí)間的水印文本
arr.push("2019-01-25 12:23:23");
let allMsg = "?x-oss-process=image/resize,w_800,h_800";
let megFirst = "/watermark,type_d3F5LXplbmhlaQ,size_18,text_";
let megLast = ",color_FFFFFF,shadow_50,t_100,g_se,x_10,y_";
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
let tempBase64 = getBase64(element);
tempBase64 = tempBase64.replace(/[+]/g, "-");
tempBase64 = tempBase64.replace(/\//g, "_");
allMsg = allMsg + megFirst + tempBase64 + megLast + (10 + 20 * index);
}
console.log("allMsgallMsg===", allMsg);
let imageUrl = "http://image-demo.img-cn-hangzhou.aliyuncs.com/example.jpg";
imageUrl = imageUrl + allMsg;
},
//---轉(zhuǎn)getBase64方法
import CryptoJS from 'crypto-js'
/**
* getBase64
*/
export const getBase64 = (word) => {
var str = CryptoJS.enc.Utf8.parse(word);
var base64 = CryptoJS.enc.Base64.stringify(str);
return base64
}
其中crypto-js的引用可參考前端crypto-js加密
最終轉(zhuǎn)化的圖片地址是：
http://image-demo.img-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_800,h_800/watermark,type_d3F5LXplbmhlaQ,size_13,text_5rmW5rm-5LqU6Lev56Kn5qGC5Zut6aaZ5rmW5rm-MeWPtw==,color_FFFFFF,shadow_50,t_100,g_se,x_10,y_10/watermark,type_d3F5LXplbmhlaQ,size_13,text_6ZmV6KW_55yB6KW_5a6J5biC54Ge5qGl5Yy65rWQ54Ge55Sf5oCB5Yy65LiW5Y2a5aSn6YGT5LiO6aaZ,color_FFFFFF,shadow_50,t_100,g_se,x_10,y_25/watermark,type_d3F5LXplbmhlaQ,size_13,text_MjAxOS0wMS0yMSAxODoyMzozMw==,color_FFFFFF,shadow_50,t_100,g_se,x_10,y_40
最終效果是:
水印圖片
需要注意的是：
URL安全的Base64位編碼
在圖片處理服務(wù)里會(huì)有很多參數(shù)需要變成Base64位編碼推穷，參考RFC4648。注意這里的URL 安全Base64位編碼只是用在水印操作某些特定參數(shù)(文字水印的文字內(nèi)容类咧，文字顏色馒铃，文字字體及圖片水印的水印object)里，不要將其用來(lái)簽名字符串(Signature)的內(nèi)容痕惋。編碼的格式是：
- 先將內(nèi)容編碼成Base64結(jié)果;
- 將結(jié)果中的加號(hào)”+”替換成中劃線“-“;
- 將結(jié)果中的斜杠”/”替換成下劃線”_”;
- 將結(jié)果中尾部的“=”號(hào)全部保留;
最大長(zhǎng)度為64個(gè)字符(即支持漢字最多20個(gè)左右)
參考地址：阿里云-圖片水印
