IK.AM

@making's tech note


HTML5でクリップボードの画像をペーストするサンプル

🗃 {Programming/JavaScript/HTML5/Clipboard}
🏷 Clipboard 🏷 HTML5 🏷 JavaScript 
🗓 Updated at 2014-04-13T18:49:24Z  🗓 Created at 2014-04-13T18:49:24Z   🌎 English Page

Chrome限定の小さいコード例


ここにペースト

CSS

#paste_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold 'Vollkorn';
    color: #bbb;
}

HTML

<div id="paste_zone">ここにペースト<br></div>

JavaScript

function pasteHandler(e) {
    if (e.clipboardData && window.Clipboard) {
        var items = e.clipboardData.items;
        if (items) {
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf("image") !== -1) {
                    var blob = items[i].getAsFile();
                    var URLObj = window.URL || window.webkitURL;
                    var source = URLObj.createObjectURL(blob);
                    createImage(source);
                }
            }
        }
    }
}
function createImage(source) {
    var pastedImage = new Image();
    pastedImage.onload = function () {
        document.getElementById('paste_zone')
                .insertBefore(this, null);
    }
    pastedImage.src = source;
}

var pasteZone = document.getElementById('paste_zone'); pasteZone.addEventListener('paste', pasteHandler, false);

参考: http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/


✒️️ Edit  ⏰ History  🗑 Delete