Kullanıcıdan, görüntü verilerinin panodan Firefox'ta bir içeriğe salt Javascript ile yapıştırılmasına nasıl izin verebilirim?

Question

Firefox'un en son sürümü için çalışan basit, ilgili ve güncel bir örnek bulmak için elimden gelenin en iyisini yaptım ve gerçekten çok mücadele ediyorum.

Başlıklar gerçekten her şeyi açıklıyor. Kullanıcının bir resmin bir kısmını Windows Paint gibi bir editörden kopyalamasını veya Print Screen düğmesini kullanmasını ve bunu bir tuval öğesine yapıştırmasını istiyorum. Kanat, yapıştırılan görüntüye tam olarak sığacak şekilde yeniden boyutlandırılırsa bonus puan (tam anlamıyla).

Makrodan bağımsız olarak Flash veya Java tabanlı çözümlerden kaçınmak.

Javascript'te yarı-saygınım ama en son HTML5 özellikleriyle göreceli olarak deneyimsiz ve Canvas öğesine tamamen yeni yaşıyorum. Lütfen yardım et!

Answer 1

Sürüm 2.0: Daha küçük, daha temiz kodlar Chrome, Firefox, Edge, Opera'da çalışır. Artık hack yok. Ancak, IE ve Safari'yi desteklemeniz gerekiyorsa, v1 sürümünü kontrol edin.

http://jsfiddle.net/KJW4E/905/

---

Sürüm 1.0 Krom uygulaması basittir. Firefox (ve IE), kullanıcının klavye olayı gibi yapıştırma yapmak için komut vermesi ve düzenlenebilir girdinin odaklanması gerektiğiyle ilgili kısıtlamalara sahiptir, bu yüzden burada hileler yaparız - aşağıya doğru ctrl giriş alanına odaklanırız.

Tarayıcı desteği (görüntü verileri):

• Firefox
• Krom
• Kenar
• IE-11
• Opera

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) { 
 
\t var _self = this; 
 
\t var canvas = document.getElementById(canvas_id); 
 
\t var ctx = document.getElementById(canvas_id).getContext("2d"); 
 
\t var ctrl_pressed = false; 
 
\t var command_pressed = false; 
 
\t var paste_event_support; 
 
\t var pasteCatcher; 
 

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

 
\t //constructor - we ignore security checks here 
 
\t this.init = function() { 
 
\t \t pasteCatcher = document.createElement("div"); 
 
\t \t pasteCatcher.setAttribute("id", "paste_ff"); 
 
\t \t pasteCatcher.setAttribute("contenteditable", ""); 
 
\t \t pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;width:10px;margin-left:-20px;'; 
 
\t \t document.body.appendChild(pasteCatcher); 
 

 
\t \t // create an observer instance 
 
\t \t var observer = new MutationObserver(function(mutations) { 
 
\t \t \t mutations.forEach(function(mutation) { 
 
\t \t \t \t if (paste_event_support === true || ctrl_pressed == false || mutation.type != 'childList'){ 
 
\t \t \t \t \t //we already got data in paste_auto() 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } 
 

 
\t \t \t \t //if paste handle failed - capture pasted object manually 
 
\t \t \t \t if(mutation.addedNodes.length == 1) { 
 
\t \t \t \t \t if (mutation.addedNodes[0].src != undefined) { 
 
\t \t \t \t \t \t //image 
 
\t \t \t \t \t \t _self.paste_createImage(mutation.addedNodes[0].src); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t //register cleanup after some time. 
 
\t \t \t \t \t setTimeout(function() { 
 
\t \t \t \t \t \t pasteCatcher.innerHTML = ''; 
 
\t \t \t \t \t }, 20); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }); 
 
\t \t var target = document.getElementById('paste_ff'); 
 
\t \t var config = { attributes: true, childList: true, characterData: true }; 
 
\t \t observer.observe(target, config); 
 
\t }(); 
 
\t //default paste action 
 
\t this.paste_auto = function (e) { 
 
\t \t paste_event_support = false; 
 
\t \t if(pasteCatcher != undefined){ 
 
\t \t \t pasteCatcher.innerHTML = ''; 
 
\t \t } 
 
\t \t if (e.clipboardData) { 
 
\t \t \t var items = e.clipboardData.items; 
 
\t \t \t if (items) { 
 
\t \t \t \t paste_event_support = true; 
 
\t \t \t \t //access data directly 
 
\t \t \t \t for (var i = 0; i < items.length; i++) { 
 
\t \t \t \t \t if (items[i].type.indexOf("image") !== -1) { 
 
\t \t \t \t \t \t //image 
 
\t \t \t \t \t \t var blob = items[i].getAsFile(); 
 
\t \t \t \t \t \t var URLObj = window.URL || window.webkitURL; 
 
\t \t \t \t \t \t var source = URLObj.createObjectURL(blob); 
 
\t \t \t \t \t \t this.paste_createImage(source); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t //wait for DOMSubtreeModified event 
 
\t \t \t \t //https://bugzilla.mozilla.org/show_bug.cgi?id=891247 
 
\t \t \t } 
 
\t \t } 
 
\t }; 
 
\t //on keyboard press 
 
\t this.on_keyboard_action = function (event) { 
 
\t \t k = event.keyCode; 
 
\t \t //ctrl 
 
\t \t if (k == 17 || event.metaKey || event.ctrlKey) { 
 
\t \t \t if (ctrl_pressed == false) 
 
\t \t \t \t ctrl_pressed = true; 
 
\t \t } 
 
\t \t //v 
 
\t \t if (k == 86) { 
 
\t \t \t if (document.activeElement != undefined && document.activeElement.type == 'text') { 
 
\t \t \t \t //let user paste into some input 
 
\t \t \t \t return false; 
 
\t \t \t } 
 

 
\t \t \t if (ctrl_pressed == true && pasteCatcher != undefined){ 
 
\t \t \t \t pasteCatcher.focus(); 
 
\t \t \t } 
 
\t \t } 
 
\t }; 
 
\t //on kaybord release 
 
\t this.on_keyboardup_action = function (event) { 
 
\t \t //ctrl 
 
\t \t if (event.ctrlKey == false && ctrl_pressed == true) { 
 
\t \t \t ctrl_pressed = false; 
 
\t \t } 
 
\t \t //command 
 
\t \t else if(event.metaKey == false && command_pressed == true){ 
 
\t \t \t command_pressed = false; 
 
\t \t \t ctrl_pressed = false; 
 
\t \t } 
 
\t }; 
 
\t //draw pasted image to canvas 
 
\t this.paste_createImage = function (source) { 
 
\t \t var pastedImage = new Image(); 
 
\t \t pastedImage.onload = function() { 
 
\t \t \t if(autoresize == true){ 
 
\t \t \t \t //resize 
 
\t \t \t \t canvas.width = pastedImage.width; 
 
\t \t \t \t canvas.height = pastedImage.height; 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t //clear canvas 
 
\t \t \t \t ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t \t \t } 
 
\t \t \t ctx.drawImage(pastedImage, 0, 0); 
 
\t \t }; 
 
\t \t pastedImage.src = source; 
 
\t }; 
 
}

1. Copy image data into clipboard or press Print Screen <br> 
 
2. Press Ctrl+V (page/iframe must be focused): 
 
<br /><br /> 
 
<canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>