---
title: HTML5でクリップボードの画像をペーストするサンプル
tags: ["Clipboard", "HTML5", "JavaScript"]
categories: ["Programming", "JavaScript", "HTML5", "Clipboard"]
date: 2014-04-13T18:49:24Z
updated: 2014-04-13T18:49:24Z
---

<p>Chrome限定の小さいコード例</p>
<hr>
    <style>
        #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;
        }
    </style>



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

<script>
    function pasteHandler(e) {
        if (e.clipboardData && window.Clipboard) {
            var items = e.clipboardData.items;
            if (items) {
                var found = false;
                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);
                        found = true;
                    }
                }
            }
            if (!found) { alert('No image is found!'); }
        }
    }
    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);
</script>




<h3>CSS</h3>
<pre><code class="lang-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;
}</code></pre>

<h3>HTML</h3>
<pre><code class="lang-html">&lt;div id=&quot;paste_zone&quot;&gt;ここにペースト&lt;br&gt;&lt;/div&gt;</code></pre>

<h3>JavaScript</h3>
<pre><code class="lang-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);</code></pre>


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