-
-
Save rickkk856/6a2800cc84dd8fd456074e5a467edc47 to your computer and use it in GitHub Desktop.
#@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") |
Many thanks! I find these two post super useful and easy developable.
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';
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?
@xinwei-zhuang try this fork... it maybe it is better for what you need
Or maybe this modified version, but it's not working so well.
The problem is that most of the code is in javascript, and collab works in python... so if want to input more parameters like brush size, colors, clear canvas, reset... you need to write them down in JS but to save the image you need to end up with PY. Its a bit hacky but it works.