牙叔教程 简单易懂
效果展示
修改列数
列.gif
修改行数
行.gif
修改旋转角度
旋转.gif
修改颜色
颜色.gif
环境
手机: Mi 11 Pro
Android版本: 11
Autojs版本: 9.0.10
图片添加水印步骤
- 选择一张图片
- 使用canvas在图片上画文字
- 调整水印到自己满意为止
- 保存添加水印的图片
你将学到以下知识点
- 更换img控件的图片
- seekbar设置和获取最大值, 当前值, 以及滑动监听
- 检测颜色是否符合十六进制
- 监听输入框
- 避免图片引用冲突导致报错
- 获取文字的宽高
- 旋转画板
- 绘制文字
如果上面的你都会了, 就没必要看下去了, 划走吧
代码讲解
1. ui界面
ui.layout(
<vertical>
<img id="img" h="300dp" w="*"></img>
<text margin="9" id="title" textSize="22sp" textColor="#fbfbfe" bg="#00afff" w="*" gravity="center"></text>
<vertical margin="33">
<horizontal>
<text text="行: " textSize="30sp"></text>
<text id="rowValue" text="0" textSize="30sp"></text>
<seekbar id="rowSeekbar" margin="9" w="*"></seekbar>
</horizontal>
<horizontal>
<text text="列: " textSize="30sp"></text>
<text id="colValue" text="3" textSize="30sp"></text>
<seekbar id="colSeekbar" margin="9" w="*"></seekbar>
</horizontal>
<horizontal>
<text text="角度: " textSize="30sp"></text>
<text id="angleValue" text="0" textSize="30sp"></text>
<seekbar id="angleSeekbar" margin="9" w="*"></seekbar>
</horizontal>
<horizontal>
<text text="颜色: " textSize="30sp"></text>
<input id="colorValue" text="#ff0000" textSize="30sp" w="200dp"></input>
</horizontal>
<button id="save" text="保存并查看"></button>
</vertical>
</vertical>
);
2. 初始化画界面
ui.rowSeekbar.setMax(8);
ui.colSeekbar.setMax(3);
ui.colSeekbar.setProgress(3);
ui.angleSeekbar.setMax(360);
ui.title.setText("牙叔教程\n添加水印");
let imgPath = "./lynx.jpg";
imgPath = files.path(imgPath);
let imgO = images.read(imgPath);
let bitmapO = imgO.getBitmap();
ui.img.setImageBitmap(bitmapO);
3. 点击按钮, 保存图片
ui.save.click(function () {
if (!imgWithWatermark) {
toastLog("图片未添加水印");
return false;
} else {
images.save(imgWithWatermark, "/sdcard/1.png");
app.viewFile("/sdcard/1.png");
}
});
4. 更新图片
function updateImg() {
let col = parseInt(ui.colSeekbar.getProgress());
let row = parseInt(ui.rowSeekbar.getProgress());
let angle = parseInt(ui.angleSeekbar.getProgress());
let currentImgWithWatermark = addWatermark(imgO, row, col, angle);
lastImgWithWatermark = imgWithWatermark;
imgWithWatermark = currentImgWithWatermark;
ui.img.setImageBitmap(imgWithWatermark.getBitmap());
lastImgWithWatermark && lastImgWithWatermark.recycle();
}
5. 监听seekbar
ui.rowSeekbar.setOnSeekBarChangeListener({
onProgressChanged: function (seekBar, progress, fromUser) {
if (fromUser) {
ui.rowValue.setText(String(progress));
updateImg();
}
},
});
6. 监听输入框
ui.colorValue.addTextChangedListener(
new android.text.TextWatcher({
afterTextChanged: function (content) {
log(content);
updateImg();
},
})
);
7. 退出脚本时, 回收资源
events.on("exit", function () {
bitmapO.recycle();
imgO.recycle();
imgWithWatermark && imgWithWatermark.recycle();
});
8. 判断颜色是否符合十六进制
颜色支持6位和8位的十六进制, 也就是说可以调节颜色的透明度
function getColor() {
let colorStr = ui.colorValue.text();
if (/^#([0-9a-f]{6}|[0-9a-f]{8})$/.test(colorStr)) {
let colorNum = $colors.parseColor(colorStr);
return colorNum;
} else {
log("颜色格式错误, 正确颜色格式: #aabbcc");
return $colors.parseColor("#ff0000");
}
}
总结
以上就是图片添加水印的大致步骤,
如果你想有自己风格的水印, 可以在看懂代码之后, 自行修改,
比如拉伸文字, 更换字体, 添加阴影浮雕之类的效果,
本教程实现的是基础的水印, 更多的水印风格,
在你学会以后, 就可以自己给图片添加水印啦,
你的风格, 自己做主.
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问
--- 牙叔教程
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
