waterImageMark

立即使用

addMark getImageObject clearCache

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

waterImageMark是一个手机端图片添加水印插件，主要实现如下功能：

一、文字水印的自定义

1、文字的颜色（渐变、透明度）
2、文字大小
3、文字的背景色（透明度）
4、文字的定位
5、文字的间距
6、文字的样式
7、文字的旋转
8、文字的渐变（渐变的横向坐标，颜色）

二、图片logo水印自定义

1、图片的间距
2、图片的定位
3、图片的间距
4、图片的旋转
5、图片的透明度
6、图片的宽高设置（待实现）
7、图片的变形（待实现）

addMark

添加图片水印

addMark({params}, callback(ret))

params

imagePath：

  • 类型：字符串
  • 描述：必填值，需要添加水印的路径（真实路径）
  • 默认值：空
  • 内部字段：

markPath：

  • 类型：字符串
  • 描述：选填值，添加在图片上的logo水印
  • 默认值：空
  • 内部字段：

savePath：

  • 类型：字符串
  • 描述：选填值，水印图片保存的输出位置
  • 默认值：更目录/waterImageMark
  • 内部字段：

margin：

  • 类型：JSON对象
  • 描述：水印的微调x和y轴的间距（注意在水印位置为10时该属性无效）
  • 默认值：x轴为0、y轴为0
  • 内部字段：

compress：

  • 类型：Number类型
  • 描述：输出水印图片的压缩率
  • 默认值：100（不压缩）～0（越低压缩越厉害）
  • 内部字段：

position：

  • 类型：JSON对象
  • 描述：水印位置，当type取值为9时x、y必填，当为10时margin参数无效
  • 默认值：type默认值为0
  1. type的取值范围：
  2. 0--->TOP_LEFT;
  3. 1--->TOP_CENTER;
  4. 2--->TOP_RIGHT;
  5. 3--->CENTER_LEFT;
  6. 4--->CENTER;
  7. 5--->CENTER_RIGHT;
  8. 6--->BOTTOM_LEFT;
  9. 7--->BOTTOM_CENTER;
  10. 8--->BOTTOM_RIGHT;
  11. 9--->CUSTOM;
  12. 10--->TILE;
  13. 11--->CENTER;

textAttr：

  • 类型：JSON对象
  • 描述：文字水印的参数
  • 默认值：
  • 内部字段：
  1. alpha               ----> 0~255
  2. rotation            ----> -360~360
  3. font                ----> 同水印logo需真实路径
  4. backgroundColorAlpha----> 同alpha
  5. shader 渐变
  6.     colorList 渐变色数组
  7.     shaderX: 渐变X坐标,
  8.     shaderY: 渐变Y坐标,

callback(ret)

  1. {
  2.     "status":true,  //布尔类型；是否成功添加水印，true|false
  3.     "data":"/storage/emulated/0/dearxy1568712093075.jpg" //字符串类型；添加水印成功后的图片的路径； 仅当 status 为 true 时输出
  4. }
示例代码
  1. var param = {
  2.         imagePath: "/storage/emulated/0/UZMap/A0000000000001/picture/p-d84d51d5.jpg",
  3.         markPath: "/storage/emulated/0/UZMap/A0000000000001/picture/p-d84d51d5.jpg",
  4.         margin: {
  5.             x: 180,
  6.             y: 180
  7.         },
  8.         position:{
  9.             type: 1,
  10.             x: 100,
  11.             y: 100
  12.         },
  13.         markType: 0,
  14.         textAttr: {
  15.             text: "测试水印效果",
  16.             size: 50,
  17.             color: "#000000",
  18.             alpha: 255,
  19.             rotation: 45,
  20.             font: "",
  21.             backgroundColor: "#00ff00",
  22.             backgroundColorAlpha: 255,
  23.             shader: {
  24.                 colorList: ["#ff0000","#0000ff"],
  25.                 shaderX: 100,
  26.                 shaderY: 100,
  27.             }
  28.         },
  29. };
  30. uzmodulemarkdemo.addMark(param, function(ret, err){
  31.         console.log(JSON.stringify(ret));
  32. });
可用性

iOS、Android系统

可提供的1.0.0及更高版本

getImageObject

获取图片信息

getImageObject({params}, callback(ret))

params

imagePath：

  • 类型：字符串
  • 描述：必填值，需要获取图片信息的路径（真实路径）
  • 默认值：空
  • 内部字段：

callback(ret)

  1. {
  2.     "status":true, //布尔类型；是否成功添加水印，true|false
  3.     "data":{      JSON类型，在status为true时有效        
  4.         "width":748,
  5.         "height":600
  6.     }
  7. }
示例代码
  1. var param = {imagePath: "/storage/emulated/0/UZMap/A0000000000001/picture/p-d84d51d5.jpg"};
  2. uzmodulemarkdemo.getImageObject(param, function(ret, err){
  3.     console.log(JSON.stringify(ret));
  4. })

clearCache

清除图片缓存数据

clearCache(callback(ret))

callback(ret)

  1. {
  2.     "status":true, //布尔类型；是否成功添加水印，true|false
  3. }
示例代码
  1. uzmodulemarkdemo.clearCache(function(ret, err){
  2.     console.log(JSON.stringify(ret));
  3. })