js中图片加水印的方法

奋斗的七月

因为项目中需要给图片加水印，但是原生实现其他需要安卓和ios两端进行开发，成本有些大，最终选择阿里云的图片加水印方法进行实现
阿里云的图片加水印很方法，里面可以加文本和图片，一张图可以加好几种不同的水印，用起来很方法，代码如下：

 //---图片加水印
    setImageUrl() {

      //--要加水印的文本--地址信息
      let detailMsg = "陕西省西安市灞桥区浐灞生态区世博大道与香湖湾五路碧桂园香湖湾1号";
      let arr = [];
      if (detailMsg) {
        if (detailMsg.length > 20) {
          detailMsg = detailMsg.replace(/(.{20})/g, "$1,");
          arr = detailMsg.split(",");
          arr.reverse();
        } else {
          arr = [detailMsg];
        }
      }
      //--要加水印的文本--需要在最上面加一个时间的水印文本
      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;
    },

//---转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加密

最终转化的图片地址是：

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位编码
在图片处理服务里会有很多参数需要变成Base64位编码，参考RFC4648。注意这里的URL 安全Base64位编码只是用在水印操作某些特定参数(文字水印的文字内容，文字颜色，文字字体及图片水印的水印object)里，不要将其用来签名字符串(Signature)的内容。编码的格式是：

先将内容编码成Base64结果;
将结果中的加号”+”替换成中划线“-“;
将结果中的斜杠”/”替换成下划线”_”;
将结果中尾部的“=”号全部保留;

最大长度为64个字符(即支持汉字最多20个左右)

参考地址：阿里云-图片水印

js中图片加水印的方法

其中crypto-js的引用可参考前端crypto-js加密

猜你喜欢