Generate a Web address：https://ai.tm2as.com/eshop/createImage.php

Picture material：https://ai.tm2as.com/eshop/

Using the tutorial:

Test code: use the browser to open the generated URL-> Right-click menu in the browser-> Click to Inspect-> Enter JS code in the Console to execute-> view the result

Used in the cloud marketing system: step selection-> browser operation-> execute JS-> fill in the picture to generate JS-> add steps

JS function execution code description:

ClearScreen(width,height);//Clear the screen,and reset width and height

CreateBackText("TM2AS");//Create a background text watermark

AddBackImage("Image URL",2,style);//Add a background image; parameter description: image address, display order (the larger the number, the higher the display),css style

MutiText("This is text",0,0,100,100,"");//Add one or more lines of text, and separate multiple lines of text with \r\n; parameter description: text, left margin, top margin, width, height, and custom CSS code; the top margin of the parameter is filled with "-1", which means that the bottom of the text drawn last time is the height distance drawn this time;

CreateFinish();//Create finish

Add one or more lines of text, and separate multiple lines of text with \r\n; parameter description: text, left margin, top margin, width, height, and custom CSS code; the top margin of the parameter is filled with "-1", which means that the bottom of the text drawn last time is the height distance drawn this time;

The address of the background picture can be obtained through the website of the picture material, and the location area of the picture displayed by the text can be obtained through the "text location function". Click the text location-> mouse box selection area-> copy the location information below to the MutiText() function under the corresponding picture in the picture material network.

The creation code structure of each picture is as follows. Copy it to the generated URL and execute JS to view the effect. The AddBackImage() and MutiText() functions can be added multiple times:

ClearScreen(800,800);

CreateBackText("TM2AS");

AddBackImage("https://aires.yocyod.com/1819250797/tmtai/asset/eshopimg/20240128/39d8dbd443137b4a.png",2);

MutiText("This is Text",30,30,730,100,"background:#000;color:#fff;padding:20px 0px;border-radius:10px;");

CreateFinish();

Commonly used text custom CSS code, can be multiple arbitrary combination：

border:1px solid red;   

border-radius:10px;   

color:#ffffff;    //Text color

background:#000000;    //Black background

padding:10px 5px;    //The text is 10 pixels above and below the border and 5 pixels to the left and right

font-weight: 600;    //Text display thickness

text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);    //Text is shaded

Reference for more CSS instructions https://www.w3schools.com/css/default.asp