Copy an image from Browser widget into LiveCode

Bringing the internet highway into your project? Building FTP, HTTP, email, chat or other client solutions?

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Copy an image from Browser widget into LiveCode

Post by capellan » Fri Nov 25, 2016 7:23 am

Hi All,

How could we copy an image from a webpage
(loaded in Browser widget) into Livecode?

Actually, we could copy text (via clipboard)
from a widget webpage and paste this text
into a LiveCode field.

Sadly this does not work for images.
Test this page within a Browser widget:
http://exupero.org/saveSvgAsPng/
and try to copy any image from this page
that convert any svg into a transparent png.

You can test offline too this "saveSvgAsPng" webpage.
Download the source code folder from:
https://github.com/exupero/saveSvgAsPng

Have a nice weekend!

Al

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Copy an image from Browser widget into LiveCode

Post by MaxV » Fri Nov 25, 2016 12:30 pm

This works for me:

Code: Select all

export snapshot from rect (the rect of widget "browser") to file "~/temp/File1.png" as PNG
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

Klaus
Posts: 13806
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Copy an image from Browser widget into LiveCode

Post by Klaus » Fri Nov 25, 2016 1:00 pm

MaxV wrote:This works for me:

Code: Select all

export snapshot from rect (the rect of widget "browser") to file "~/temp/File1.png" as PNG
That is really not what Al has been asking for! :roll:

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Copy an image from Browser widget into LiveCode

Post by capellan » Sat Nov 26, 2016 2:02 am

I found the surprisingly easy answer:

1) Load the webpage in the Browser widget

2) Execute the javascript in the page (click a button on
the webpage or call/run/etc... the Javascript functions
from a LiveCode script)

3) on the message box write:
put the htmltext of widget "Browser"

4) grab the base64 PNG image data from the htmltext
and process the result to show the image inside LiveCode

All these steps could be converted in a single script
by more experienced LC-JS developers. Hopefully
they will notice this thread too.

By the way, the answer to this question of converting
svg in png solved another related problem:
Flattening Transforms of SVG files.

Now, using Javascript within the Browser widget,
we have access to convert svg to png and flatten
transforms in svg files to import svg as vector files.

Without your answers and interest, this topic
could have been dropped at once in the dust bin.

This day, we made a very useful discovery. 8)
Have a nice weekend!

Al

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Copy an image from Browser widget into LiveCode

Post by capellan » Mon Nov 28, 2016 12:07 pm

Hi All,

Take a look at the stack attached to this message.
It's just a first draft that must be improved
in the javascript code and Livecode scripts.

Ideally, the process of copying a svg as a png
into the LiveCode stack should take a single click
and offer more options, like resizing and cropping
but these features will appear, eventually, if this
stack is useful.

Have a nice week!

Al
SVGToPNG_Draftv01.livecode.zip

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Copy an image from Browser widget into LiveCode

Post by capellan » Tue Nov 29, 2016 4:06 am

This version added a dotted red line around svg graphic (via css)
and is really useful to position a svg graphic within it's viewBox
to crop or reduce extra space around the graphic.

The svg property: preserveAspectRatio="xMidYMid meet"
allows to scale the svg graphic proportionally changing
just one of these properties: width or height.

There is only one problem: sometimes, copying base64 text
to the clipboard using the button takes a lot of time.
Sometimes is really fast, but sometimes takes a lot of time.

I understand that for really big PNG images, the clipboard size
is almost 2 MB or more, but copying directly from the Text Area
within the Widget is almost instantaneous...

Al
SVGToPNG_Draftv02.livecode.zip

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Copy an image from Browser widget into LiveCode

Post by capellan » Thu Dec 01, 2016 3:11 am

This new version (Draft 03) includes code from a stack posted by Peter Brett
in the LiveCode Quality Center. This code execute a javascript within the
browser widget and copy the rendered DOM into a LiveCode variable.

When this script works fine, the png image is copied automatically
from the browser and pasted within the stack.
When the script fails, there is a warning explaining that you
must copy the base 64 data from the widget browser and
click the button "Convert clipboard to image..."

Looks like Livecode 8 and 9 becomes unstable if you copy large texts
to the clipboard or in a variable or inside a field... but if you wait
long enough, the IDE recovers and you could keep working without
force quitting LiveCode.

By the way, with this stack, sometimes the Browser widget reports this error:

LCB Error: Value is not correct type for assignment to variable - expected type <type:livecode.lang.string> for assigning to variable tResult in com.livecode.widget.browser.browserEvaluateJavascript

Object: svg2png
LCB File: browser.lcb
LCB Line: 700

Al
SVGToPNG_Draftv03.livecode.zip

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Copy an image from Browser widget into LiveCode

Post by capellan » Tue Feb 21, 2017 7:59 pm

Hi All,

Download a new version of this utility stack (Draft 04)
In this version the svg file is converted to a png image
and is copied automatically from the Widget Browser
and pasted within the stack into a new png image.

Requires LiveCode 8.1.3 or later.

In next versions, I will include an interface for
applying scaling, clipping, grouping, svg filters,
svg transforms, etc... to imported svg.

Many thanks again to Peter Brett and Jonathan Lynch
for posting their stacks and demonstrate how to pass
data from the Browser Widget to Livecode.

Download here this compressed stack:
SVGToPNGv04.zip

golife
Posts: 103
Joined: Fri Apr 02, 2010 12:10 pm

Re: Copy an image from Browser widget into LiveCode

Post by golife » Sun Jan 24, 2021 8:14 pm

Just came across these posts for either importing or exporting a snapshot of the widget browser.
I am working on Windows Desktop 10, LiveCode version 9.6.1.

Simply using "import snapshot from widget "browser" does not work, because the browser content has it's own layer.
What you can do though is importing a snapshot from the screen rect.

Here is the code which can be shortened, but just to better understand it, I kept it lengthy.
I want to place an image of the webpage visited as a reminder in the format of a small thumbnail.
The thumbnail is then stored in a database as a BLOB.

First I reduce the size of the webpage to fit using late Hermann Hoch's zoom function.
The ratio calculation depends on the size of the webpage you browse. The ratio given here fits mostly.

Code: Select all

command zoomBrowserContent
   # Zoom full browser page to existing brower rect. 
   /*
   Author: Late Hermann Hoch (-hh)
   Desc.: CSS is used and executed in the current browser.
   Tested: Windowa 10
   Date: 24-Jan-2021
   */
   local tRatio
   local tBrowserName = "browser" -- your browser name
   --
   put 500 / 1920 into tRatio
   do "document.body.style.zoom=" & tRatio in widget tBrowserName
end zoomBrowserContent
So, now I want a snapshot from this webpage and paste it into another image.

Code: Select all

command getBrowserSnapShotIntoImage
   # Take a snapshot from a browser widget
   /* 
   The rect of the browser cannot directly be used.
   "Import snapshot from browser tBrowserName" does not work.
   The screen rect must be calculated for the browser, not the relative rect.
   The script here was tested on Windows 10 in LC version 9.6.1.
   Tested: Windows 10
   Date: 24-Jan-2021
   */
   local tLeft,tTop,tRight,tBottom,tRect
   local tID
   local tBrowserName = "browser" -- your widget name
   local tImageName = "preview" -- your image name
   --
   put the left of this stack into tLeft
   put the top of this stack into tTop
   put the right of this stack into tRight
   put the bottom of this stack into tBottom
   --
   add the left of widget tBrowserName to tLeft
   add the top of widget tBrowserName to tTop
   put tLeft + the width of widget tBrowserName into tRight
   put tTop + the height of widget tBrowserName into tBottom
   --
   put tLeft &comma& tTop &comma& tRight &comma& tBottom into tRect
   --
   import snapshot from rect tRect
   put the id of the last image into tID
   set the text of image tImageName to the text of image id tID -- lockloc of image tImageName is true.
   delete image id tID  -- more safe than using "last image". We do not need this image.
end getBrowserSnapShotIntoImage

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Copy an image from Browser widget into LiveCode

Post by bogs » Sun Jan 24, 2021 10:27 pm

golife wrote:
Sun Jan 24, 2021 8:14 pm
Simply using "import snapshot from widget "browser" does not work, because the browser content has it's own layer.
I'm not too sure your theory is entirely correct, but I *do* think you are looking at a bug :shock:

For example, see if you can find anything similar between the two exported pictures, one of the browser widget, and one of an ordinary field...
aPic_exportSnapshot.png
You know, onions have layers too....
It seems more likely to me that something has gone awry with snapshot, and it probably needs a bug report filed. Just my opinion :D
Image

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9802
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Copy an image from Browser widget into LiveCode

Post by FourthWorld » Mon Jan 25, 2021 6:16 am

Import snapshot would work until you encounter an image at a higher resolution than screen res. Maybe that's okay, depends on the goal.

Another option might be to skip the browser altogether, download the HTML with GET, parse the desired image URL from it, and then download the image file.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Copy an image from Browser widget into LiveCode

Post by bogs » Mon Jan 25, 2021 11:19 am

The dictionary actually offers an example that is cut and paste workable under import snapshot.

Code: Select all

local myRect, winID
put the rect of widget "browser" into myRect
put the windowID of stack "o" into winID
import snapshot from rect myRect of window winID  ## could also use export, btw...
produces the image of the browser widget accurately. Hopefully, this was of some help.
Image

golife
Posts: 103
Joined: Fri Apr 02, 2010 12:10 pm

Re: Copy an image from Browser widget into LiveCode

Post by golife » Mon Jan 25, 2021 4:25 pm

Well, thank for all the comments.

In this case, I am probably looking at a bug, at least on my Windows machine. I really tried the "import snapshot" many times and it did not work with a browser widget to copy.

Of course, using the HTML solutions directly retrieving the snapshot might be more interesting. I shall try that. But anyway, I just wanted a very small thumbnail.

I will check it out again and then file a bug report in case the bug proves to be a bug.

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Copy an image from Browser widget into LiveCode

Post by bogs » Mon Jan 25, 2021 4:28 pm

@golife -

You used the code I posted and didn't get a direct snapshot ? Which version of Windows and Lc are you using? I'd like to see if I can recreate the issue your having with it.
Image

golife
Posts: 103
Joined: Fri Apr 02, 2010 12:10 pm

Re: Copy an image from Browser widget into LiveCode

Post by golife » Mon Jan 25, 2021 5:00 pm

I am using Indy 9.6.1 and Windows latest version 10 Build 18363

Yes, please check... Thanks )))

Post Reply

Return to “Internet”