किसी ब्राउज़र में फ़्लैश में चित्र खींचें और छोड़ें

हमारी सेवा का परीक्षण करने के दौरान, पर्याप्त मात्रा में फीडबैक एकत्र किया गया कि आवेदन करने के लिए फाइल डाउनलोड करने का पुराना स्कूल तरीका नहीं है। लोग ड्रैग एंड ड्रॉप चाहते थे और डेस्कटॉप से ​​सीधे चित्र खींचने और छोड़ने की कोशिश करते थे। हमारा एप्लिकेशन संपूर्ण ब्राउज़र स्क्रीन पर कब्जा कर लेता है और फ्लैश पर लिखा जाता है, इसलिए समस्या को हल करने का कोई सीधा तरीका नहीं था।

सोचने और समझने के बाद, हमने इस तरह से कम से कम क्रोम के लिए डी एंड डी को लागू करने का फैसला किया:
जब उपयोगकर्ता एप्लिकेशन के साथ टैब से स्विच करता है, अर्थात। यह फ़ोकस खो देता है, फ्लैश ड्राइव के ऊपर एक div सुपरइम्पोज़ किया जाता है, जिस पर गिराई गई फ़ाइलों को पकड़ने की घटना को लटका दिया जाता है।
फिर, एक्सटर्नल इंट्रोडक्शन के माध्यम से, बाइटअरे के रूप में छवि को फ्लैश में स्थानांतरित किया जाता है, जहां इसे डिकोड किया जाता है और प्रदर्शित किया जाता है।


फ्लैश पर डिव का प्रदर्शन करें

#over_holder_full { background-color: #eee; opacity: 0.6; position: absolute; width: 100%; height: 100%; z-index: 7; display: none; } #flash_conainer { width: 100%; height: 100%; position: absolute; z-index: 0; } <div id="over_holder_full"></div> <div id="flash_conainer"> <div id="myContent"> <h1>Alternative content</h1> </div> </div> 

फोकस खो जाने पर हम #over_holder_full दिखाते हैं, जिस पर ड्रैग एंड ड्रॉप आरोहित होता है

 window.addEventListener('blur', function() { fullDragArea.style.display = "block"; console.log("not focused"); }); window.addEventListener('focus', function() { fullDragArea.style.display = "none"; console.log("focus"); }); 

#Over_holder_full द्वारा एक फ़ाइल को पकड़ना

 fullDragArea = $id("over_holder_full"); // is XHR2 available? var xhr = new XMLHttpRequest(); if (xhr.upload) { fullDragArea.addEventListener("dragover", FileDragHover, false); fullDragArea.addEventListener("drop", FileSelectHandler, false); // <--     //.... } 

फ्लैश इमेज ट्रांसफर

 // file selection function FileSelectHandler(e) { fullDragArea.style.display = "none"; // fetch FileList object var files = e.target.files || e.dataTransfer.files; //set grey preview in flash setPreview(pageX, pageY); // process all File objects setTimeout(function(){//<--     setPreview     for (var i = 0, f; f = files[i]; i++) { ParseFile(f); }}, 100); } // output file information function ParseFile(file) { var arrBuffer; if (file.type.indexOf("image") == 0) { var reader = new FileReader(); reader.onload = function(e) { //console.log("arrBuffer + " + e.target.result.byteLength); var dataview = new DataView(e.target.result); var ints = new Int32Array(e.target.result.byteLength / 4); //<--       for (var i = 0; i < ints.length; i++) { ints[i] = dataview.getInt32(i * 4);//<--    4  (        ByteArray) } console.log("ints" + ints.length); // display an image setImage(pageX, pageY, ints); } reader.readAsArrayBuffer(file); } } 

फंक्शंस बाइंडिंग जावास्क्रिप्ट और फ्लैश

 function setImage(pageX, pageY, int32Arr) { if (swfReady){ var res = []; for (var i = 0; i < int32Arr.length; i++) { res[i] = int32Arr[i]; //<--   ..  externalinterface      ,  Int32Array   } getSWF("DefaultLauncher").setImage(pageX, pageY, res);//    -   } } function setPreview(pageX, pageY) { if (swfReady) { console.log("setPreview"); getSWF("DefaultLauncher").setPreview(pageX, pageY); } } 

फ़्लैश पक्ष पर छवि को स्वीकार करें

 var exManager:EXManager = new EXManager(); exManager.setImageCallback = function(pageX:Number, pageY:Number, listBytes:Array):void{ var ba:ByteArray = new ByteArray(); for(var i:int = 0; i<listBytes.length; i++){ ba.writeInt(listBytes[i]); //  ByteArray } var myDecoder:JPEGDecoder = new JPEGDecoder(); //        ByteArray myDecoder.parse(ba); var colorComponents:uint = myDecoder.colorComponents; var numComponents:uint = myDecoder.numComponents; var pixels:Vector.<uint> = myDecoder.pixels; var width:uint = myDecoder.width; var height:uint = myDecoder.height; var bitmap:BitmapData = new BitmapData ( width, height, false ); bitmap.setVector ( bitmap.rect, pixels ); var bmp:Bitmap = new Bitmap(bitmap); var oldW:Number = bmp.width; bmp.width = bmp.width > 500 ? 500 : bmp.width; bmp.height = bmp.height*(bmp.width / oldW); bmp.x = pageX; bmp.y = pageY; stage.addChild(bmp); } exManager.setPreviewCallback = function(pageX:Number, pageY:Number):void{ var sp:Sprite = new Sprite(); sp.graphics.beginFill(0x666666, 0.8); sp.graphics.drawRect(0,0,100,80); sp.x = pageX; sp.y = pageY; stage.addChild(sp); } 

सूत्रों को यहां डाउनलोड किया जा सकता है

टिप्पणी:
यह उदाहरण केवल JPG एक्सटेंशन के साथ छवियों के साथ काम करता है, लेकिन इसे आसानी से किसी अन्य प्रारूप में बढ़ाया जा सकता है।

Wmode के कारण: अपारदर्शी संपत्ति, जो इसके ऊपर एक डिव को प्रदर्शित करने के लिए आवश्यक है, फ्लैश ड्राइव में स्क्रॉल काम नहीं करता है। यदि समाधान हैं, तो मुझे उनकी बात सुनकर खुशी होगी।

उदाहरण को चलाने के लिए, आपको इसे कम से कम स्थानीय सर्वर पर रखना होगा।

अपडेट:
जैसा कि सुझाव दिया गया है, माउसव्हील घटना के साथ गड़बड़ को दूर करने के लिए, आपको निम्नलिखित को js में जोड़ना होगा:

 function wheel(event){ var delta = 0; if (!event) event = window.event; //  IE. //   delta if (event.wheelDelta) { // IE, Opera, safari, chrome -    120 delta = event.wheelDelta/120; } else if (event.detail) { // Mozilla,    3 delta = -event.detail/3; } //    mousewheel if (delta && typeof wheelHandle == 'function') { wheelHandle(delta); //    -   ( ). if (event.preventDefault) event.preventDefault(); event.returnValue = false; //  IE } } function wheelHandle(delta){ if (swfReady){ getSWF("DefaultLauncher").externalMouseWheelHandler(delta); } } function pageInit() { jsReady = true; //   mousewheel if (window.addEventListener) // mozilla, safari, chrome window.addEventListener('DOMMouseScroll', wheel, false); // IE, Opera. window.onmousewheel = document.onmousewheel = wheel; } 

और फ़्लैश में भी जोड़ें:

 private function externalMouseWheelHandler(delta:int):void { var globalPoint:Point = new Point(stage.mouseX, stage.mouseY); var objects:Array = stage.getObjectsUnderPoint(globalPoint); if (!objects || !objects.length) { return; } var target:DisplayObject = objects[objects.length - 1] as DisplayObject; if (!target) { return; } target = (target is InteractiveObject) ? target : target.parent; if (!target) { return; } var localPoint:Point = target.globalToLocal(globalPoint); var mouseEvent:MouseEvent = new MouseEvent(MouseEvent.MOUSE_WHEEL); mouseEvent.localX = localPoint.x; mouseEvent.localY = localPoint.y; mouseEvent.delta = delta; target.dispatchEvent(mouseEvent); } 

अपडेट 2:
कुछ प्रयोगों के बाद, यह स्पष्ट हो गया कि डेटा को टुकड़ों में स्थानांतरित करना बेहतर है, साथ ही बफर से पढ़ें getInt32 माध्यम से नहीं बल्कि getInt8 माध्यम से, क्योंकि फ़ाइल की लंबाई आवश्यक रूप से 4 के एक से अधिक नहीं है, जैसा कि पहले मामले में माना गया है।

जावास्क्रिप्ट

 function setImage(bufer) { if (swfReady){ var dataview = new DataView(bufer); var byteLength = bufer.byteLength; //    4 var numBytes = 10000; var startPos = 0; var finishPos; var i = 0; while(i < byteLength){ finishPos = ((startPos + numBytes) > byteLength) ? byteLength : startPos + numBytes; var res = []; for (i = startPos; i < finishPos; i++) { res[i - startPos] = dataview.getInt8(i); //  getInt32  getInt8 } startPos = finishPos; getSWF().sendData(res); } getSWF().sendDataFinish(); } } function setPreview(pageX, pageY, fileName) { if (swfReady){ getSWF().sendDataStart(pageX, pageY, fileName); } } 

ActionScript

 _exManager.sendDataStartCb = function(pageX:Number, pageY:Number, fileName:String):void { prevtime = getTimer(); }; _exManager.sendDataCb = function(listBytes:Array):void { for (var i:int = 0; i < listBytes.length; i++) { ba.writeByte(listBytes[i]);//      } }; _exManager.sendDataFinishCb = function():void { loadFromByteArray(ba); ba.clear(); };