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: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

Post Reply
capellan
Posts: 360
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

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: 1307
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: http://livecodeitalia.blogspot.it
To post code use this: http://tinyurl.com/ogp6d5w

Klaus
Posts: 9528
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: 360
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

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: 360
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

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
Compressed stack
(6.49 KiB) Downloaded 58 times

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

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
Compressed stack
(6.77 KiB) Downloaded 64 times

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

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
Compressed stack "svg to png" draft v03
(6.92 KiB) Downloaded 76 times

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

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
Compressed stack SVGToPNG version 04
(7.58 KiB) Downloaded 74 times

Post Reply

Return to “Internet”