从剪贴板粘贴图像 [英] Paste image from clipboard

问题描述

我试图粘贴剪贴板中的图像在我的网站（如复制和粘贴）。鸭preciate如果任何人都可以在这个意见。我能实现这个使用HTML 5或applet或任何方式。任何意见或任何链接，以供参考是非常AP preciated。

I'm trying to paste image from clipboard in my website (like copy and paste). Appreciate if anyone could advice on this. Can I achieve this using HTML 5 or applet or any way. Any advice or any link for reference is highly appreciated.

推荐答案

管理使用JavaScript来做到这一点。

Managed to do it with JavaScript.

的JavaScript

if (!window.Clipboard) {
   var pasteCatcher = document.createElement("apDiv1");
   pasteCatcher.setAttribute("contenteditable", "");
   pasteCatcher.style.opacity = 0;
   document.body.appendChild(pasteCatcher);
   pasteCatcher.focus();
   document.addEventListener("click", function() { pasteCatcher.focus(); });
} 

window.addEventListener("paste", onPasteHandler);

function onPasteHandler(e)
{
    if(e.clipboardData) {
        var items = e.clipboardData.items;
        if(!items){
            alert("Image Not found");
        }
        for (var i = 0; i < items.length; ++i) {
        if (items[i].kind === 'file' && items[i].type === 'image/png') {
            var blob = items[i].getAsFile(),
                source = window.webkitURL.createObjectURL(blob);

            pastedImage = new Image();
            pastedImage.src = source;

            pasteData();
            }
        }
    }
}

function pasteData()
{
    drawCanvas = document.getElementById('drawCanvas1');
    ctx = drawCanvas.getContext( '2d' );
    ctx.clearRect(0, 0, 640,480);
    ctx.drawImage(pastedImage, 0, 0);
}

DIV

<div id="apDiv1" contenteditable='true'>Paste Test</div>

这篇关于从剪贴板粘贴图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！