104 lines
2.9 KiB
HTML
104 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>JS notebook</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
#dropable {
|
|
position: absolute;
|
|
width: 600px;
|
|
height: 600px;
|
|
left: 100px;
|
|
top: 100px;
|
|
background-color: bisque;
|
|
}
|
|
|
|
#dragable {
|
|
width: 60px;
|
|
height: 60px;
|
|
position: relative;
|
|
left: 0px;
|
|
top: 0px;
|
|
background-color: aquamarine;
|
|
}
|
|
|
|
#dragable.dragging,
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="dropable">
|
|
<div id="dragable" draggable="true"></div>
|
|
</div>
|
|
<img id="pic" src="" />
|
|
<script>
|
|
dragable.addEventListener("dragstart", (e) => {
|
|
setTimeout(() => e.target.classList.add("dragging"), 0);
|
|
e.dataTransfer.setData("offsetX", e.offsetX - 30);
|
|
e.dataTransfer.setData("offsetToCenterY", e.offsetY - 30);
|
|
});
|
|
|
|
dropable.addEventListener("dragover", (e) => {
|
|
e.preventDefault();
|
|
});
|
|
|
|
dropable.addEventListener("drop", (e) => {
|
|
e.preventDefault();
|
|
const left =
|
|
Math.floor((e.offsetX - e.dataTransfer.getData("offsetX")) / 60) * 60;
|
|
const top =
|
|
Math.floor((e.offsetY - e.dataTransfer.getData("offsetY")) / 60) * 60;
|
|
dragable.style.left = `${left}px`;
|
|
dragable.style.top = `${top}px`;
|
|
});
|
|
|
|
dragable.addEventListener("dragend", (e) => {
|
|
e.target.classList.remove("dragging");
|
|
});
|
|
|
|
function toDataURL(src, callback) {
|
|
const image = new Image();
|
|
image.crossOrigin = "Anonymous";
|
|
image.src = src;
|
|
image.onload = function () {
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("2d");
|
|
canvas.height = this.naturalHeight;
|
|
canvas.width = this.naturalWidth;
|
|
context.drawImage(this, 0, 0);
|
|
const dataURL = canvas.toDataURL();
|
|
callback(dataURL);
|
|
};
|
|
}
|
|
|
|
async function a(src) {
|
|
const image = new Image();
|
|
image.crossOrigin = "Anonymous";
|
|
image.src = src;
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("2d");
|
|
canvas.height = image.naturalHeight;
|
|
canvas.width = image.naturalWidth;
|
|
await context.drawImage(image, 0, 0);
|
|
return canvas.toDataURL();
|
|
}
|
|
|
|
// toDataURL('https://source.unsplash.com/random/100x100', (dataURL) => {
|
|
// console.log(dataURL)
|
|
// pic.src = dataURL
|
|
// })
|
|
pic.src = a("https://source.unsplash.com/random/100x100");
|
|
</script>
|
|
</body>
|
|
</html>
|