64 lines
2.3 KiB
HTML
64 lines
2.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<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>random picture from unsplash</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||
|
|
}
|
||
|
|
img {
|
||
|
|
box-shadow: 4px 4px 4px rgb(251, 255, 0);
|
||
|
|
}
|
||
|
|
.loading {
|
||
|
|
border: 1px dashed rgb(0, 255, 242);
|
||
|
|
opacity: 0.5;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
.centered {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
color: white;
|
||
|
|
text-shadow: 0 0 2px rgb(255, 0, 0);
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
position: relative;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.hide {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<p>click to change this picture</p>
|
||
|
|
<img id="image" src="https://source.unsplash.com/random/200x200" onclick="changePicture()" />
|
||
|
|
<div id="loading" class="centered hide">loading</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function changePicture() {
|
||
|
|
loading.classList.remove('hide')
|
||
|
|
image.classList.add('loading')
|
||
|
|
let tmpImg = new Image()
|
||
|
|
tmpImg.crossOrigin = 'Anonymous'
|
||
|
|
tmpImg.src = 'https://source.unsplash.com/random/200x200?random=' + performance.now()
|
||
|
|
tmpImg.onload = function () {
|
||
|
|
const canvas = document.createElement('canvas')
|
||
|
|
canvas.height = this.naturalHeight
|
||
|
|
canvas.width = this.naturalWidth
|
||
|
|
const context = canvas.getContext('2d')
|
||
|
|
context.drawImage(this, 0, 0)
|
||
|
|
const picData = canvas.toDataURL()
|
||
|
|
image.src = picData
|
||
|
|
image.classList.remove('loading')
|
||
|
|
loading.classList.add('hide')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script></body>
|
||
|
|
</html>
|