Created
January 27, 2022 17:29
-
-
Save donatj/8ec12c55f256c09fdfd2ecd153404c06 to your computer and use it in GitHub Desktop.
Simple Gif Play/Pause
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
<html> | |
<body> | |
<img src="tumblr_ngqdgj3vqt1sulnzno1_500.gif"> | |
<img src="tumblr_ngqdgj3vqt1sulnzno1_500.gif" width="100"> | |
<img src="tumblr_ngqdgj3vqt1sulnzno1_500.gif" style="width: 30px; height: 200px;"> | |
<br> | |
<button onclick="play()">Play</button> | |
<button onclick="pause()">Pause</button> | |
<script> | |
const gifs = document.querySelectorAll('img[src*=".gif"]'); | |
for (const g of gifs) { | |
g.setAttribute('data-src', g.src); | |
} | |
function play() { | |
for (const g of gifs) { | |
g.src = g.getAttribute('data-src'); | |
} | |
} | |
function pause() { | |
for (const g of gifs) { | |
const canvas = document.createElement("canvas"); | |
const ctx = canvas.getContext("2d"); | |
var img = document.createElement("img"); | |
img.onload = function () { | |
canvas.width = img.width; | |
canvas.height = img.height; | |
ctx.drawImage(img, 0, 0); | |
g.src = canvas.toDataURL(); | |
} | |
img.src = g.src; | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment