Last active
April 17, 2020 21:40
-
-
Save Leedehai/d9fd92e08a355ac79ecaff207c76cb00 to your computer and use it in GitHub Desktop.
So, you want to paint in HTML5 canvas.
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
<!-- The boilerplate for HTML5 canvas painting. View in browser. | |
How to use: create canvas.js in the same directory and get the | |
canvas object by the element id "canvas". Draw on the canvas. | |
--> | |
<html translate="no"> | |
<head> | |
<title>Canvas sketching</title> | |
<meta name="google" content="notranslate"> | |
<style> | |
body { | |
background-color: #efefef; | |
} | |
canvas { | |
background-color: white; | |
} | |
p { | |
font-size: 12px; | |
} | |
a { | |
color: blue; | |
} | |
#data_url { | |
width: 100ch; | |
font-family: monospace; | |
font-size: 12px; | |
word-wrap: break-word; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<canvas id="canvas" style="border:none;"> | |
Your browser does not support the HTML5 canvas tag.</canvas> | |
<p> | |
<a href="canvas.js" target="_blank">Sketching script</a> | |
</p> | |
<p> | |
Use Node to convert data URL to image: | |
<a href="https://gist.github.com/madhums/e749dca107e26d72b64d" target="_blank">GitHub Gist</a>, | |
or use an online utility like | |
<a href="https://onlinepngtools.com/convert-base64-to-png" target="_blank">[1]</a> | |
or | |
<a href="https://codebeautify.org/base64-to-image-converter" target="_blank">[2]</a>. | |
</p> | |
<p> | |
Data URL: | |
<button id="copy_to_clipboard">Copy to clipboard</button> | |
<div id="data_url"></div> | |
</p> | |
</div> | |
<script src="canvas.js"></script> | |
<script> | |
// Data URL (base64) | |
const dataUrl = document.getElementById('canvas').toDataURL('image/png'); | |
document.getElementById('data_url').textContent = dataUrl; | |
</script> | |
<script> | |
/** | |
* Copy to clipboard. The specification requires this function is called | |
* after querying and getting the clipboard permission, but Firefox does | |
* not need (and does not support) the permission, and Safari does not | |
* support Permission API and Clipboard API at all. | |
* NOTE Alternative approach: execCommand('copy') is not supported in | |
* Safari, and execCommand() is a deprecating feature. | |
* NOTE It turns out Chrome/Chromium is indeed the best! (1/2020) | |
* https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard | |
* https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText | |
* @param {!HTMLElement} contentElement | |
*/ | |
function copyToClipboard(contentElement) { | |
const copyToClipboardImpl = () => { | |
navigator.clipboard.writeText(contentElement.textContent); | |
}; | |
try { | |
if (navigator.permissions) { | |
navigator.permissions.query({ name: 'clipboard-write' }).then(result => { | |
if (result.state == 'granted' || result.state == 'prompt') { | |
copyToClipboardImpl(); | |
} | |
}).catch(() => { // Firefox does not fully support the Permission API. | |
copyToClipboardImpl(); | |
}); | |
} else { // Some others do not support the Permission API at all. | |
copyToClipboardImpl(); | |
} | |
} catch (e) { // Safari, uhh.. | |
if (e instanceof TypeError) { | |
window.alert('The copy-text feature encountered a bug.\n\n' | |
+ 'It needs Clipboard API and Permissions API, features\n' | |
+ 'required in the Web Standard. Your browser does not\n' | |
+ 'support them :( Consider using another browser.'); | |
} | |
} | |
} | |
const copyButton = document.querySelector("button#copy_to_clipboard"); | |
copyButton.addEventListener('click', () => { | |
copyToClipboard(document.getElementById("data_url")); | |
}); | |
</script> | |
</body> | |
</html> |
Author
Leedehai
commented
Apr 17, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment