National Day gradient Portrait

National Day five-star red flag gradually changing head

Five Star Red flag translucent avatar tutorial

Flag gradient image

National Day avatar flag gradient production tutorial

I wish the motherland prosperity and prosperity without regret!

Results show

origin

In the group chat, someone said that the flag gradient effect, I looked at it, it is a bit handsome, so I studied it

The environment

Thunder Simulator: 4.0.63 Android version: 7.1.2 Autojs version: 8.8.20

Train of thought

1. Prepare flags and pictures
2. Flag change transparent gradient
3. Merge two images

Here’s what you’ll learn

• Determine the image type. If the user receives JPG, convert it to PNG
• Change the size of the picture to match the width and height of the flag and profile picture
• Change the image to transparent gradient
• Save MAT as a file
• Byte array converted to hexadecimal string
• Mat turn bitmap
• Prints mat’s properties
• Merged images

The code on

1. Flag gradient I made a module, easy to call

let formatImg = require("./formatImg");

let dir = files.path("./img");
var arr = files.listDir(dir);
let filePathList = arr.map((item) = > {
  return files.join(dir, item);
});

filePathList.map((filePath) = > {
  formatImg(filePath);
});
Copy the code

2. Import the classes

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(org.opencv.android.Utils);
importClass(android.graphics.Bitmap);
importClass(java.lang.StringBuilder);
importClass(java.io.FileInputStream);
importClass(java.io.File);
Copy the code

3. Define the image type to determine the image type

const TYPE_JPG = "jpg";
const TYPE_GIF = "gif";
const TYPE_PNG = "png";
const TYPE_BMP = "bmp";
const TYPE_UNKNOWN = "unknown";
Copy the code

4. Normalized images are changed to PNG format

function formatImg(imgPath) {
  let type = getPicType(new FileInputStream(new File(files.path(imgPath))));
  if (type === "png") {
    return imgPath;
  } else if (type === "jpg") {
    var img = images.read(imgPath);
    images.save(img, "/sdcard/tempImg001.png");
    return "/sdcard/tempImg001.png";
  } else {
    toastLog("JPG or PNG only");
    return false; }}Copy the code

5. Read the picture

var img = images.read(imgPath);
var img2 = images.read(imgPath2);
Copy the code

6. Resize the image

function normalize(img, img2) {
  let imgWidth = img.getWidth(); / / 200
  let imgHeight = img.getHeight(); / / 200
  return images.resize(img2, [imgWidth, imgHeight]);
}
Copy the code

7. Change the image transparency gradient

function transparentGradient(mat) {
  let width = mat.width();
  let height = mat.height();
  let unit = 256 / width;
  let wLimit = (width / 5) * 3;
  for (var i = 0; i < height; i++) {
    for (var j = 0; j < width; j++) {
      let item = mat.get(i, j);
      if (j > wLimit) {
        item[3] = 0;
      } else {
        item[3] = 180- unit * j; } mat.put(i, j, item); }}return mat;
}
Copy the code

8. Merge images

let img4 = merge(mat, mat3);
Copy the code

9. Preview the effect

let tempDir = files.join("/sdcard/Pictures/img");
let tempFilePath2 = files.join(tempDir, files.getName(oImgPath2));
files.createWithDirs(tempFilePath2);
images.save(img4, tempFilePath2);
app.viewFile("/sdcard/1.png");
Copy the code

10. Free up resources

img.recycle();
img2.recycle();
img3.recycle();
img4.recycle();
mat.release();
mat3.release();
Copy the code

Quotes.

Thinking is the most important, other Baidu, Bing, StackOverflow, Android documents, autoJS documents, and finally in the group to ask — fang Shu tutorial

The statement

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