Last active
May 17, 2024 03:38
-
-
Save rickkk856/6a2800cc84dd8fd456074e5a467edc47 to your computer and use it in GitHub Desktop.
Drawing Interface For Google Colaboratory - Paint
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#@title <font color='red'>Drawing APP</font> {vertical-output: true, run: "auto"} | |
import ipywidgets as widgets | |
from ipywidgets import Layout, Button, Box | |
from IPython.display import display, HTML, Image | |
from google.colab.output import eval_js | |
from base64 import b64decode | |
Square_Size = 256 #@param ["256", "512"] {type:"raw"} | |
Brush_Size = 30 #@param {type:"slider", min:0, max:100, step:5} | |
filename = "my_drawing"#@param [] {allow-input: true} | |
filename = filename + ".png" | |
js_code = ''' | |
<style> | |
.colors-buttons div { | |
width: 30px; | |
height: 30px; | |
margin: 2px;} | |
div { | |
display: flex; | |
} | |
canvas{border:1px solid black !important;} | |
</style> | |
<canvas id="myCanvas" width="%d" height="%d"></canvas> | |
<div class="colors-buttons"> | |
<div class="color" style="background-color: #000000;" id-color="#000000"></div> | |
<div class="color" style="background-color: #FFFFFF;" id-color="#FFFFFF"></div> | |
<div class="color" style="background-color: #FFFF00;" id-color="#FFFF00"></div> | |
<div class="color" style="background-color: #FF00FF;" id-color="#FF00FF"></div> | |
<div class="color" style="background-color: #00FFFF;" id-color="#00FFFF"></div> | |
<div class="color" style="background-color: #FF0000;" id-color="#FF0000"></div> | |
<div class="color" style="background-color: #0000FF;" id-color="#0000FF"></div> | |
<div class="color" style="background-color: #00FF00;" id-color="#00FF00"></div> | |
</div> | |
<script> | |
var canvas = document.querySelector('canvas') | |
var ctx = canvas.getContext('2d') | |
ctx.fillStyle = 'white'; | |
ctx.fillRect( 0, 0, canvas.width, canvas.height) | |
var Brush_Size = %d | |
var button = document.querySelector('button') | |
var mouse = {x: 0, y: 0} | |
canvas.addEventListener('mousemove', function(e) { | |
mouse.x = e.pageX - this.offsetLeft | |
mouse.y = e.pageY - this.offsetTop | |
}) | |
canvas.onmousedown = ()=>{ | |
ctx.beginPath() | |
ctx.moveTo(mouse.x, mouse.y) | |
canvas.addEventListener('mousemove', onPaint) | |
} | |
canvas.onmouseup = ()=>{ | |
canvas.removeEventListener('mousemove', onPaint) | |
} | |
var onPaint = ()=>{ | |
ctx.fillRect(mouse.x-( Brush_Size/2), mouse.y-(Brush_Size/2), Brush_Size, Brush_Size) | |
ctx.stroke() | |
} | |
const colors = document.getElementsByClassName('color'); | |
Array.from(colors).forEach(color => { | |
color.addEventListener('click', (event) => { | |
const colorSelected = event.target.getAttribute('id-color'); | |
ctx.fillStyle = colorSelected; | |
}); | |
}); | |
// FINISH BUTTON | |
var data = new Promise(resolve=>{ | |
button.onclick = ()=>{ | |
resolve(canvas.toDataURL('image/jpg')) | |
} | |
}) | |
</script> | |
''' | |
## Function to Appear Image Canvas | |
def draw(filename=filename, w=Square_Size, h=Square_Size, Brush_Size=Brush_Size): | |
display(HTML(js_code % (w, h, Brush_Size))) | |
data = eval_js("data") | |
binary = b64decode(data.split(',')[1]) | |
if AttributeError: | |
pass | |
with open(filename, 'wb') as f: | |
f.write(binary) | |
return len(binary) | |
if button2.on_click(on_button_clicked2): | |
pass | |
## Action for Reset Button | |
def on_button_clicked(b): | |
with output: | |
#display(HTML(canvas_html % ( w=$Square_Size, h=$Square_Size, Brush_Size=$Brush_Size))) | |
data = eval_js("data") | |
binary = b64decode(data.split(',')[1]) | |
with open(filename, 'wb') as f: | |
f.write(binary) | |
return len(binary) | |
## Show Save Button & Save outputs | |
button = widgets.Button(description="Save") | |
button.on_click(on_button_clicked) | |
output = widgets.Output() | |
display(button, output) | |
## Show Canvas for the First Time | |
draw(filename=filename, w=Square_Size, h=Square_Size, Brush_Size=Brush_Size) | |
print("Image Saved at") |
the script works great, but i have a problem, can you tell me why the save image button stops working when you load the canvas with an image?
var ctx = canvas.getContext('2d') let newImage = newImage(); newImage.onload = () => { ctx.drawImage(newImage, 0, 0, 256, 256); } newImage.src = 'https://iili.io/QBYTE7.png';
hello, did you solve that problem. out maybe found other way to draw on other images with colab
Hello, may I please ask how to load an image to the canvas first and then draw on it?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
the script works great, but i have a problem, can you tell me why the save image button stops working when you load the canvas with an image?
var ctx = canvas.getContext('2d')
let newImage = newImage();
newImage.onload = () => {
ctx.drawImage(newImage, 0, 0, 256, 256);
}
newImage.src = 'https://iili.io/QBYTE7.png';