Skip to content

Instantly share code, notes, and snippets.

@yoya

yoya/dropcanvas.html

Last active June 6, 2022 13:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yoya/290097b5a606c9e635e99a5e4dc27523 to your computer and use it in GitHub Desktop.
Save yoya/290097b5a606c9e635e99a5e4dc27523 to your computer and use it in GitHub Desktop.
Download ZIP
file drop & canvas draw with petite-vue
Raw
dropcanvas.html
<head>
<meta charset="utf-8">
<meta name="copyright" content="Copyright &copy; 2022/06/06- yoya@awm.jp . All Rights Reserved.">
<style>
.drop_area { min-width:300px; min-height:300px; border:thick solid red; }
.drop_area:hover { background-color:#FF000040; }
</style>
</head>
<body>
<div v-scope="App()" @vue:mounted="mounted">
<div class="drop_area" @dragover.prevent @drop.prevent="drop">
<canvas id="canvas"> </canvas>
</div>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
function App(props) {
this.image = new Image();
return {
drop(e) {
const file = e.dataTransfer.files[0];
if (file) {
const reader = new FileReader();
reader.readAsDataURL(file);
const that = this;
reader.onload = function(e) {
const image = that.image;
image.src = e.target.result;
}
}
},
mounted() {
console.log(`mounted`);
const image = this.image;
image.onload = function() {
const ctx = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0,
image.width, image.height,
0, 0, canvas.width, canvas.height);
}
}
}
}
createApp({ App }).mount()
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment