Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Vložení obrázku ze schránky pomocí clipboardData</title> <h1>Vložení obrázku ze schránky pomocí <code>clipboardData</code></h1> <p>Obrázek ze schránky jde vložit pomocí <code>clipboardData</code>.</p> <div id="contenteditable" contenteditable="" onpaste="prekopirovat(this)"></div> <canvas id="cc"></canvas> <img style="display: none" id="obrazek">
HTML
Autoformát
Standardní režim
Mobilní zobrazení
[contenteditable] { border: 1px solid #000; height: 200px; width: 100%; }
CSS
Autoformát
CSS reset
Až na konci
var canvas = document.getElementById("cc"); var ctx = canvas.getContext("2d"); var obrazek = document.getElementById("obrazek"); // Chrome nepotřebuje focus v něčem, kam se dá vkládat window.addEventListener("paste", vlozit); function vlozit(e) { if (!e.clipboardData) return false; var polozky = e.clipboardData.items; if (!polozky) return false; for (var i = 0; i < polozky.length; i++) { if (polozky[i].type.indexOf("image") == -1) continue; var blob = polozky[i].getAsFile(); var URLObj = window.URL || window.webkitURL; var dataUrl = URLObj.createObjectURL(blob); vytvoritObrazek(dataUrl); } } function vytvoritObrazek(dataUrl) { var obr = document.createElement("img"); obr.src = dataUrl; obr.onload = prekopirovat; document.getElementById('contenteditable').appendChild(obr); } function prekopirovat() { el = document.getElementById('contenteditable'); var casovac = setTimeout(function() { var obr = el.getElementsByTagName("img")[0]; if (!obr) return false; canvas.width = obr.width; canvas.height = obr.height; ctx.drawImage(obr, 0, 0); el.removeChild(obr); }, 50); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>