Tooth uncle tutorial is easy to understand

Results show

Modify the number of columns

Modify the number of rows

Modify rotation Angle

Change the color

The environment

Phone: Mi 11 Pro

Android version: 11

Autojs version: 9.0.10

Step of adding watermark to picture

  1. Select an image
  2. Use canvas to draw text on the picture
  3. Adjust the watermark to your own satisfaction
  4. Save the watermarked image

Here’s what you’ll learn

  • Replace the image of the IMG control
  • Seekbar sets and gets maximum values, current values, and slide listening
  • Check whether the color conforms to hexadecimal
  • Listening input box
  • Avoid errors caused by conflicting image references
  • Gets the width and height of the text
  • Rotating sketchpad
  • Rendering text

If you know what’s up there, there’s no point in reading. Row away

The code on

1. UI interface
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="Line." textSize="30sp"></text>
        <text id="rowValue" text="0" textSize="30sp"></text>
        <seekbar id="rowSeekbar" margin="9" w="*"></seekbar>
      </horizontal>
      <horizontal>
        <text text="Column." textSize="30sp"></text>
        <text id="colValue" text="3" textSize="30sp"></text>
        <seekbar id="colSeekbar" margin="9" w="*"></seekbar>
      </horizontal>
      <horizontal>
        <text text="Angle:" textSize="30sp"></text>
        <text id="angleValue" text="0" textSize="30sp"></text>
        <seekbar id="angleSeekbar" margin="9" w="*"></seekbar>
      </horizontal>
      <horizontal>
        <text text="Color:" textSize="30sp"></text>
        <input id="colorValue" text="#ff0000" textSize="30sp" w="200dp"></input>
      </horizontal>
      <button id="save" text="Save and view"></button>
    </vertical>
  </vertical>
);
Copy the code
2. Initialize the drawing interface
ui.rowSeekbar.setMax(8);
ui.colSeekbar.setMax(3);
ui.colSeekbar.setProgress(3);
ui.angleSeekbar.setMax(360);
ui.title.setText("Tooth Uncle Tutorial \n Add Watermark");
let imgPath = "./lynx.jpg";
imgPath = files.path(imgPath);
let imgO = images.read(imgPath);
let bitmapO = imgO.getBitmap();
ui.img.setImageBitmap(bitmapO);
Copy the code
3. Click the button to save the picture
ui.save.click(function () {
  if(! imgWithWatermark) { toastLog("Image is not watermarked");
    return false;
  } else {
    images.save(imgWithWatermark, "/sdcard/1.png");
    app.viewFile("/sdcard/1.png"); }});Copy the code
4. Update images
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();
}
Copy the code
5. Monitor seekbar
ui.rowSeekbar.setOnSeekBarChangeListener({
  onProgressChanged: function (seekBar, progress, fromUser) {
    if (fromUser) {
      ui.rowValue.setText(String(progress)); updateImg(); }}});Copy the code
6. Listen for input boxes
ui.colorValue.addTextChangedListener(
  new android.text.TextWatcher({
    afterTextChanged: function (content) { log(content); updateImg(); }}));Copy the code
7. Reclaim resources when you exit the script
events.on("exit".function () {
  bitmapO.recycle();
  imgO.recycle();
  imgWithWatermark && imgWithWatermark.recycle();
});
Copy the code
8. Check whether the color matches the hexadecimal value

Color support 6 – and 8-bit hexadecimal, which means you can adjust the color transparency

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("Wrong color format, correct color format: #aabbcc");
    return $colors.parseColor("#ff0000"); }}Copy the code

conclusion

These are the general steps for adding watermarks to images.

If you want to have your own style of watermarking, you can modify it yourself after reading the code, such as stretching text, changing fonts, adding shadow emblazon and so on,

This tutorial is to achieve the basic watermarking, more watermarking style, after you learn, you can add your own watermarking pictures,

Your style is up to you.

Quotes.

Ideas are the most important, other Baidu, Bing, StackOverflow, Github, Android docs, AutoJS docs, and last but not least, ask in the group

The statement

This tutorial is intended for learning purposes only and is not intended for any other use

Wechat official account tooth Uncle tutorial