Wklej obraz z systemu na stronie HTML za pomocą javascript

Witam tworzę aplikację czatu internetowego, w której chcę, aby użytkownik mógł skopiować wklej obraz z pulpitu lub może wkleić bezpośrednio zrzut ekranu, ale nie jestem w stanie go osiągnąć. Użyłem poniższy kod:Wklej obraz z systemu na stronie HTML za pomocą javascript

$("#dummy").on("paste",function(event){ 

var items = (event.clipboardData || event.originalEvent.clipboardData).items; 
console.log(JSON.stringify(items)); // will give you the mime types 
for (index in items) { 
    var item = items[index]; 
    if (item.kind === 'file') { 
     var blob = item.getAsFile(); 
     var reader = new FileReader(); 
     reader.onload = function(event){ 
      console.log(event.target.result)}; // data url! 
     reader.readAsDataURL(blob); 
    } 
} 

})

stosując powyższy kod w Chrome i Firefox Dostaję clipboardDataniezdefiniowany w przypadku obrazu. Próbowałem wiele linków w google, ale nie mogłem dotrzeć do celu. Próbowałem też poniżej linku z stackoverflow: Paste an image from clipboard using JavaScript również poniższy link:

http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

http://codepen.io/netsi1964/pen/IoJbg

może ktoś mi pomóc z całkowitym przykład jak to osiągnąć?

Źródło

2016-02-19 pareshm

Czy zauważyłeś, że na końcu brakowało Ci średnika? –

Jeśli używasz identyfikatora divs, twój kod działa. –

Czy możesz dodać działające skrzypce lub pisak kodu kod działa tylko z Printscreen radzenie sobie z obrazem na pulpicie nie działa – pareshm

-2

Chrome

Dodaj swój kod na on kod z codepen i podać identyfikator do div (linia 50)

Dołącz skrypt jak pisał powyżej id div

$("#one").on("paste", function (event) { 

    var items = (event.clipboardData || event.originalEvent.clipboardData).items; 
    console.log(JSON.stringify(items)); // will give you the mime types 
    for (index in items) { 
    var item = items[index]; 
    if (item.kind === 'file') { 
     var blob = item.getAsFile(); 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
     console.log(event.target.result) 
     }; // data url! 
     reader.readAsDataURL(blob); 
    } 
    } 

})

Zrób zrzut ekranu, wybierz pierwszy element div (ten o identyfikatorze one), naciśnij Ctrl + V, zrzut ekranu pojawi się w pliku div, a pliki Imagedata zostaną zarejestrowane jako współdzielone nsole.

Firefox użyć kodu I prepeared cię w tym fiddle

<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <style> 
    #one { 
     border: 1px solid black; 
     min-height: 100px; 
     min-width: 100px; 
    } 
    </style> 
</head> 

<body> 
    Copy image from clipboard in Firefox. 
    <br /> Select the box below and paste a image from clipboard via ctrl+v 
    <br /> Data printed at console 
    <br /> 
    <div id="one" contenteditable="true"></div> 

    <script> 
    $(function() { 
     $("#one").bind("input paste", function (ev) { 
     window.setTimeout(function (ev) { 
      var input = $("#one").children()[0].src; 
      var s = input.split(','); 
      var mime = s[0]; 
      var data = s[1]; 
      console.log(mime); 
      console.log(data); 
     }, 300); 
     }); 
    }); 
    </script> 
</body> 

</html>

Chrome & Firefox połączeniu

wersji połączonej za pomocą kodu z @pareshm dla Chrome i mój kod do Firefoksa można znaleźć w thi s updated fiddle (Testowane z zawartości schowka systemowego za pośrednictwem stworzonej przez ctrl + screendump drukowania i kopiowania części obrazu z GIMP)

Źródło

2016-02-19 09:29:36

Odkomentuj/usuń wywołanie snapshoot() w linii 137, aby pozbyć się nieokreślony błąd –

Ale wklei zrzut ekranu Chcę wkleić obraz skopiowany z komputera lub innej lokalizacji komputera. – pareshm

Opublikowany kod mojej odpowiedzi działa, z zastrzeżeniem, że spowoduje błąd powodujący niezdefiniowaną funkcję migawki, która będzie musiała dodać lub usunąć swoje wywołanie, aby pozbyć się komunikatu o błędzie –

Demo

Works na temat najnowszego Chrome/Firefox. Implementacja Chrome jest prosta. Firefox ma ograniczenia, które użytkownik musi wydać polecenie, aby wkleić jak wydarzenie na klawiaturze, a edytowalne dane wejściowe muszą być skupione, więc robimy sztuczki tutaj - na ctrl w dół my focususthat pole wejściowe, na unfocus release.

HTML:

<canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>

JS:

var CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true); 

/** 
* image pasting into canvas 
* 
* @param string canvas_id canvas id 
* @param boolean autoresize if canvas will be resized 
*/ 
function CLIPBOARD_CLASS(canvas_id, autoresize) { 
    var _self = this; 
    var canvas = document.getElementById(canvas_id); 
    var ctx = document.getElementById(canvas_id).getContext("2d"); 
    var ctrl_pressed = false; 
    var reading_dom = false; 
    var text_top = 15; 
    var pasteCatcher; 
    var paste_mode; 

    //handlers 
    document.addEventListener('keydown', function (e) { 
     _self.on_keyboard_action(e); 
    }, false); //firefox fix 
    document.addEventListener('keyup', function (e) { 
     _self.on_keyboardup_action(e); 
    }, false); //firefox fix 
    document.addEventListener('paste', function (e) { 
     _self.paste_auto(e); 
    }, false); //official paste handler 

    //constructor - prepare 
    this.init = function() { 
     //if using auto 
     if (window.Clipboard) 
      return true; 

     pasteCatcher = document.createElement("div"); 
     pasteCatcher.setAttribute("id", "paste_ff"); 
     pasteCatcher.setAttribute("contenteditable", ""); 
     pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;'; 
     pasteCatcher.style.marginLeft = "-20px"; 
     pasteCatcher.style.width = "10px"; 
     document.body.appendChild(pasteCatcher); 
     document.getElementById('paste_ff').addEventListener('DOMSubtreeModified', function() { 
      if (paste_mode == 'auto' || ctrl_pressed == false) 
       return true; 
      //if paste handle failed - capture pasted object manually 
      if (pasteCatcher.children.length == 1) { 
       if (pasteCatcher.firstElementChild.src != undefined) { 
        //image 
        _self.paste_createImage(pasteCatcher.firstElementChild.src); 
       } 
      } 
      //register cleanup after some time. 
      setTimeout(function() { 
       pasteCatcher.innerHTML = ''; 
      }, 20); 
     }, false); 
    }(); 
    //default paste action 
    this.paste_auto = function (e) { 
     paste_mode = ''; 
     pasteCatcher.innerHTML = ''; 
     var plain_text_used = false; 
     if (e.clipboardData) { 
      var items = e.clipboardData.items; 
      if (items) { 
       paste_mode = 'auto'; 
       //access data directly 
       for (var i = 0; i < items.length; i++) { 
        if (items[i].type.indexOf("image") !== -1) { 
         //image 
         var blob = items[i].getAsFile(); 
         var URLObj = window.URL || window.webkitURL; 
         var source = URLObj.createObjectURL(blob); 
         this.paste_createImage(source); 
        } 
       } 
       e.preventDefault(); 
      } 
      else { 
       //wait for DOMSubtreeModified event 
       //https://bugzilla.mozilla.org/show_bug.cgi?id=891247 
      } 
     } 
    }; 
    //on keyboard press - 
    this.on_keyboard_action = function (event) { 
     k = event.keyCode; 
     //ctrl 
     if (k == 17 || event.metaKey || event.ctrlKey) { 
      if (ctrl_pressed == false) 
       ctrl_pressed = true; 
     } 
     //c 
     if (k == 86) { 
      if (document.activeElement != undefined && document.activeElement.type == 'text') { 
       //let user paste into some input 
       return false; 
      } 

      if (ctrl_pressed == true && !window.Clipboard) 
       pasteCatcher.focus(); 
     } 
    }; 
    //on kaybord release 
    this.on_keyboardup_action = function (event) { 
     k = event.keyCode; 
     //ctrl 
     if (k == 17 || event.metaKey || event.ctrlKey || event.key == 'Meta') 
      ctrl_pressed = false; 
    }; 
    //draw image 
    this.paste_createImage = function (source) { 
     var pastedImage = new Image(); 
     pastedImage.onload = function() { 
      if(autoresize == true){ 
       //resize canvas 
       canvas.width = pastedImage.width; 
       canvas.height = pastedImage.height; 
      } 
      else{ 
       //clear canvas 
       ctx.clearRect(0, 0, canvas.width, canvas.height); 
      } 
      ctx.drawImage(pastedImage, 0, 0); 
     }; 
     pastedImage.src = source; 
    }; 
}

Safari nie implementuje DataTransfer.items, więc nie ma sposobu, aby dane obrazu ekstrakt (tjzrzut ekranu skopiowany do schowka) w języku JavaScript . Możesz uzyskać skopiowane pliki, ale nie dane.

[Od postu przelewu]

Źródło

2016-02-23 11:31:39

Wziąłem głos, ponieważ działa jak charme –

Działa tylko z ekranem Print, nie działa z obrazem kopiowania z pulpitu i wklejaniem na płótnie ... :( – pareshm

Działa poprawnie dla mnie, testowałem go w Firefoksie przez Copy from Desctop i wklejałem Jaka jest twoja wersja firefox? –

Wklej obraz z systemu na stronie HTML za pomocą javascript

Odpowiedz

Powiązane problemy