Tooth uncle tutorial is easy to understand

Results show

Why do

I see other people’s avatars in this style, and while I’m not going to change mine,

But I wanted to know how to do that,

Although I have written it, I still feel that it is not exactly like the effect of Douyin, and there may be some shortcomings

The environment

Phone: Mi 11 Pro

Android version: 11

Autojs version: 9.0.10

Train of thought

  1. Douyin’s logo looks like two images overlapping each other
  2. Two images are transparent
  3. We added an offset
  4. Take two transparent images from the original image and overlay them

Here’s what you’ll learn

  • Set the Seekbar listening event
  • In the Seekbar listening event, IMG sets up the image and then retrieves it
  • Since modifying an image is a time-consuming operation, it should be placed in multiple threads
  • Merge transparent images
  • Byte arrays are converted to hexadecimal strings
  • Judge the type of picture
  • Modify the values of mat channels
  • Mat turn bitmap

The code on

1. Import classes, which you will use almost anytime you use OpencV in AutoJS
console.time("Import class");
runtime.images.initOpenCvIfNeeded();
importClass(org.opencv.core.MatOfByte);
importClass(org.opencv.core.Scalar);
importClass(org.opencv.core.Point);
importClass(org.opencv.core.CvType);
importClass(java.util.List);
importClass(java.util.ArrayList);
importClass(java.util.LinkedList);
importClass(org.opencv.imgproc.Imgproc);
importClass(org.opencv.imgcodecs.Imgcodecs);
importClass(org.opencv.core.Core);
importClass(org.opencv.core.Mat);
importClass(org.opencv.core.MatOfDMatch);
importClass(org.opencv.core.MatOfKeyPoint);
importClass(org.opencv.core.MatOfRect);
importClass(org.opencv.core.Size);
importClass(org.opencv.features2d.DescriptorMatcher);
importClass(org.opencv.features2d.Features2d);
importClass(org.opencv.core.MatOfPoint2f);
importClass(android.graphics.Bitmap);
importClass(org.opencv.android.Utils);
importClass(java.lang.StringBuilder);
importClass(java.io.FileInputStream);
importClass(java.io.File);
console.timeEnd("Import class");
Copy the code
2. The interface
ui.layout(
  <vertical>
    <img id="img"></img>
    <text id="info" textSize="22sp" textColor="#fbfbfe" bg="#00afff" w="*" gravity="center">Tooth tertiary tutorial</text>
    <horizontal margin="8">
      <text>Brush transparency:</text>
      <text id="paintAlphaValue">0</text>
      <seekbar id="paintAlphaSeekbar" margin="9" w="*"></seekbar>
    </horizontal>
    <horizontal margin="8">
      <text>Image transparency:</text>
      <text id="channelAlphaValue">0</text>
      <seekbar id="channelAlphaSeekbar" margin="9" w="*"></seekbar>
    </horizontal>
    <horizontal margin="8">
      <text>Image offset:</text>
      <text id="offsetValue">0</text>
      <seekbar id="offsetSeekbar" margin="9" w="*"></seekbar>
    </horizontal>
  </vertical>
);
Copy the code
3. Set the listener
ui.channelAlphaValue.setText(String(channelAlpha));
ui.channelAlphaSeekbar.setMax(255);
ui.channelAlphaSeekbar.setProgress(channelAlpha);
ui.channelAlphaSeekbar.setOnSeekBarChangeListener({
  onStopTrackingTouch: function (seekBar) {
    let progress = seekBar.getProgress();
    let lastImg = currentImg;
    ui.channelAlphaValue.setText(String(progress));
    channelAlpha = parseInt(progress);
    ui.post(function () {
      threads.start(function () { currentImg = updateImg(); }); lastImg.recycle(); }); }});Copy the code
4. Edit the image
function updateImg() {
  let modifiedMat = modifyChannelValue(mat);
  let modifiedBitmap = mat2bitmap(modifiedMat);
  modifiedMat.release();
  let modifiedMat2 = modifyChannelValue2(mat);
  let modifiedBitmap2 = mat2bitmap(modifiedMat2);
  modifiedMat2.release();
  let newImg = merge(grayBitmap, modifiedBitmap, modifiedBitmap2);
  ui.img.setImageBitmap(newImg.bitmap);
  modifiedBitmap.recycle();
  modifiedBitmap2.recycle();
  return newImg;
}
Copy the code
5. Turn bitmap mat
function mat2bitmap(mat) {
  let width = mat.width();
  let height = mat.height();
  let bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
  Utils.matToBitmap(mat, bitmap);
  return bitmap;
}
Copy the code
6. Convert the byte array to a hexadecimal string
function bytesToHexString(src) {
  let stringBuilder = new StringBuilder();
  if (src == null || src.length <= 0) {
    return null;
  }

  for (let i = 0; i < src.length; i++) {
    let v = src[i] & 0xff;
    let hv = java.lang.Integer.toHexString(v);

    if (hv.length < 2) {
      stringBuilder.append(0);
    }
    stringBuilder.append(hv);
  }
  return stringBuilder.toString();
}
Copy the code
7. Release resources
events.on("exit".function () {
  ui.post(function () {
    img.recycle();
    grayBitmap.recycle();
    grayImg.recycle();
    currentImg.recycle();
    log("Exit recycle resource");
  });
});
Copy the code

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