Differences

This shows you the differences between two versions of the page.

--- help:cheats:tricks_image_overlay [2022/07/23 06:50] – peyo energies. 101.174.159.45
+++ help:cheats:tricks_image_overlay [2022/07/23 07:55] (current) – no.. actually, this wording!! 101.174.159.45
@@ Line 15: / Line 15: @@
   - Type 'not supported' to get to the canvas in Peyo's html !
   - Edit the html line starting '<canvas id=' to add 'opacity:0.6;' in the 'style=' attribute. Example: //<canvas id="myCanvas" width="600" height="500" style="opacity:0.6;width: 722px; height: 601.667px; cursor: pointer;">canvas not supported?</canvas>//
-  - Edit the containing html element starting '<div id="cancont"' to add: //<img src="IMGHERE" style="position:absolute;width:100%;height:100%">//
+  - Enter text edit on the html element above the one you just edited starting '<div id="cancont"'
+  - On a new line between the html element starting '<div id="cancont"' and the html element starting '<canvas id=', insert the following html snippet: //<img src="IMGHERE" style="position:absolute;width:100%;height:100%">//
   - replace the text 'IMGHERE' with the url of your hosted image, it should be a direct link ending with the image extension such as .jpg or .png
   - close your browser's inspector to resume drawing with your image overlay!
   - if you wish to hide the overlay, reopen your inspector and change the 'opacity' line you added from '0.6' to '1'
+**Sample Html Result:**
+After following the above steps, you may have something similar to this in your html inspector:
+  <div id="cancont" style="width: 722px; height: 601.667px; left: 8px; top: 88px;">
+      <img src="https://pchutney.com/public/avatars/avatar_1.png" style="position:absolute;width:100%;height:100%">
+      <canvas id="myCanvas" width="600" height="500" style="opacity:0.6; width: 722px; height: 601.667px; cursor: pointer;">canvas not supported?</canvas>
+  </div>
 **Limitations:**
@@ Line 25: / Line 35: @@
 **Ideas:**
   * Blender layouts with basic shapes that have wireframe overlay make handy references
-  * You can edit together multiple images to plan a multi-panel panel
+  * You can edit together multiple images to plan a multi-panel panel  !
-  * You might like to automate this process, with a macro tool like xdotool/bash on linux, powershell on windows or something more direct like tampermonkey / browser tools / other?
+  * this process can be automated with a macro tool like xdotool/bash on linux, powershell on windows or something more direct like tampermonkey / browser tools / other !

Chutney Wiki

User Tools

Site Tools

Differences

Page Tools