Is it possible to take a screenshot of html tag content with OpenLaszlo?

StackOverflow https://stackoverflow.com/questions/12973637

  •  09-07-2021
  •  | 
  •  

سؤال

I am creating an openlaszlo application where an html tag will be present and i have some components that are draggable in the swf. I want to drag these components over the html. This is not possible.

So what i am thinking of is to take a screenshot of the html content and replace it with the actual html content when i need to drag over it.

Theoretically this should be possible and it's possible in flex I verified my self. I am trying to do the same thing in Openlaszlo. But i am not getting any leads

So far i have tried like this And i am getting an error that the html tag is not object of IBitmapDrawable

<canvas width="800" height="600" bgcolor="white" debug="true">
<script when="immediate"><![CDATA[
class MagUtils {
#passthrough (toplevel: true) {
import flash.display.DisplayObject;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.geom.ColorTransform;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.*;
import flash.events.MouseEvent;
import mx.graphics.ImageSnapshot;
import flash.utils.ByteArray;
import flash.display.IBitmapDrawable;
}#

var temp:lz.view;
var colorTransform:ColorTransform;
var rect:Rectangle;


public function snap (m:IBitmapDrawable, t:lz.view):void {

temp = t;
var temp_mc = temp.sprite; // getMCRef();
var mainView_mc = main.sprite; // getMCRef();
var scale = 1;
var x;
var y;
var w;
var h;
  var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(m);
  var imageByteArray:ByteArray = imageSnap.data;
colorTransform = new flash.geom.ColorTransform();
rect = new flash.geom.Rectangle(0, 0, temp.width, temp.height);

var bitmap:BitmapData = new flash.display.BitmapData(w, h, false);
 bitmap.setPixels(rect, imageByteArray);
var bm:Bitmap = new Bitmap(bitmap);
temp.sprite.addChild (bm);
bitmap = null;
}
}
lz.MagUtils = new MagUtils();
]]>

</script>


<button name="magnifier" text="magnifyingtool" >
<handler name="onclick">
lz.MagUtils.snap(canvas.main.ht,canvas.temp);
</handler>
</button>

<view name="main" x="5" y="15" width="200" height="200" bgcolor="yellow">
    <html name="ht" width="200" height="200" src="http:hello.html"/>
</view>
<view id="temp" name="temp" x="5" y="300" visible="true" width="200" height="200" bgcolor="gray">
</view>


</canvas>

And the HTML Content is 

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
   <HEAD>
      <TITLE>
         A Small Hello
      </TITLE>
   </HEAD>
<BODY>
   <H1>Hi</H1>
   <P>Test Page</P>
</BODY>
</HTML>
هل كانت مفيدة؟

المحلول

It's no possible to take a screenshot in Flash of elements which are not managed by the Flash display list, which includes iFrame content placed below the SWF movie in the browser. And that seems to be what you are trying to do.

If you want to drag a visual object from the iFrame into the SWF movie area, one approach might be to render the content in HTML into an HTML5 canvas element, extract the bitmap data and push that into the SWF movie to be displayed in an OpenLaszlo view. But that would mean that all visual elements you want to drag need to be drawn into an HTML5 canvas.

Here is an example where uses Flash Player's filter functionality to apply the filter to an image in an HTML5 canvas element: http://www.quasimondo.com/archives/000695.php

Here are the links to the relevant files for this example:

  1. The HTML page embedding an invisible SWF for processing the image.
  2. JavaScript file with functions for sending the data to the SWF movie clip.
  3. ActionScript class processing the image data sent from JavaScript, and passing the processed data back to the HTML page.

But I'm not sure that all the content you have in your iFrame can be rendered into a canvas element.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top