MobileRead Forums - Plugin to insert and wrap an image with SVG

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- Plugins (https://www.mobileread.com/forums/forumdisplay.php?f=268)

- - Plugin to insert and wrap an image with SVG (https://www.mobileread.com/forums/showthread.php?t=283333)

He's inadvertently thumbnailing self.img with PIL (to display it in the Tk widget). So when self.img.size is called later on, the new smaller thumbnail size is the one being returned.

Lots of different ways to tackle correcting it. A down-and-dirty-way to get it going would be to make a few similar changes in two different locations.

In plugin.py (latest version) starting with line #255 change:

Code:

self.img = Image.open(BytesIO(bkImage))

size = 400, 400

self.img.thumbnail(size, Image.ANTIALIAS)

self.photo = ImageTk.PhotoImage(self.img)

to:

Code:

img_temp = Image.open(BytesIO(bkImage))

self.img = img_temp.copy()

size = 400, 400

img_temp.thumbnail(size, Image.ANTIALIAS)

self.photo = ImageTk.PhotoImage(img_temp)

And in plugin.py line #275 (before the above change) change:

Code:

self.img = Image.open(filehandle.name)

size = 400, 400

self.img.thumbnail(size, Image.ANTIALIAS)

self.photo = ImageTk.PhotoImage(self.img)

to:

Code:

img_temp = Image.open(filehandle.name)

self.img = img_temp.copy()

size = 400, 400

img_temp.thumbnail(size, Image.ANTIALIAS)

self.photo = ImageTk.PhotoImage(img_temp)

Quote:

Originally Posted by Queen Fiona (Post 3853085)

Why are the viewBox and image size tags so much smaller than the actual image?

It's always been like that -- I know nothing about SVG, but I assumed it was a virtual page that was scaled up to whatever the real size is; since it does seem to work in iBooks and converted to AZW3.

Quote:

Originally Posted by AlanHK (Post 3853368)

It's a bug in the plugin that i documented in the post immediately prior to yours. It may "work" in iBooks and KindleBooks, but unnecessarily limiting the dimensions of SVG wrapped images to a maximum of 400px is definitely not the way it's supposed (or intended) to work.

It was an easy mistake to make. It's not immediately clear that the image.thumbnail() function of Pillow is actually altering the original image, rather than returning a new, smaller copy of it.

Quote:

Originally Posted by DiapDealer (Post 3853460)

It's not immediately clear that the image.thumbnail() function of Pillow is actually altering the original image, rather than returning a new, smaller copy of it.

I don't think so -- the images seem sharp as original. I've used it in several books and would feel compelled to redo the images if they are indeed downsampled and not just rescaled. The whole reason I used SVG is to get maximum size without distortion.

So I hope what it is doing now can be clarified: does it downsample to 400px?

PS-- did some tests. I made a PNG with 1 px lines 1 px apart, image size 800x800.

the SVG plugin made:

Code:

<div><svg 

        xmlns="http://www.w3.org/2000/svg"

        height="100%"  width="100%"

        preserveAspectRatio="xMidYMid meet" version="1.1"

        viewBox="0 0 400 400"

        xmlns:xlink="http://www.w3.org/1999/xlink">

        <image width="400" height="400" xlink:href="../Images/bigtest.png"/>

        </svg> </div>

I copied this file and made it:

Code:

<div><svg 

        xmlns="http://www.w3.org/2000/svg"

        height="100%"  width="100%"

        preserveAspectRatio="xMidYMid meet" version="1.1"

        viewBox="0 0 800 800"

        xmlns:xlink="http://www.w3.org/1999/xlink">

        <image width="800" height="800" xlink:href="../Images/bigtest.png"/>

        </svg></div>

Comparing them on screen, see two lines in both.
If I resize the PNG in PhotoShop to 400x400, the lines blur into each other, as the gap becomes 0.5 px.

So, the plugin isn't resampling. It's silly, but not degrading the image.

PPS--

Took it the other way and made the "thumbnail" size even smaller.
All looked fine, even down to:

Code:

<div><svg 

        xmlns="http://www.w3.org/2000/svg"

        height="100%" width="100%" 

        preserveAspectRatio="xMidYMid meet" version="1.1" 

        viewBox="0 0 1 1" 

        xmlns:xlink="http://www.w3.org/1999/xlink">

        <image width="1" height="1" xlink:href="../Images/bigtest.png"/>

        </svg></div>

It might however distort the image slightly as the aspect ratio becomes less precise with smaller numbers.

No. The image itself is not being downsampled. The SVG wrapper is limiting the viewbox to 400 pixels on the longest side. Which is essentially the same thing for display purposes. The plugin is making a mistake in this regard. There's no question about that. I've posted a potential fix.

When using this plugin with 0.9.15 (beta), I get the following error message: "You must select an image from the list or load a file or press Close".

I have selected an image from the list, and yet this message persists.

I don't use this plugin often, so not sure if this problem is new with 0.9.15, but thought I'd report it.

I'm on a Mac (High Sierra), if that makes a difference.

Seems to working as expected on on Windows with 0.9.15. Can you document the exact steps you're taking?

1) Plugins > Edit > InsertImageSVG

2) Select image — note: image does not appear in the plugin's preview pane, which remains blank (see 1st image attachment)

3) Click "Insert"

4) Get error message (2nd image attachment)

I tried this with an image already imported in the epub and also using the "Import external image" button.

I also tried changing the position ("At the start," "At the end," etc.) but that didn't make a difference.

Finally, when I tried re-sizing the plugin window, the preview pane goes from blank to showing some distortion (3rd image attachment)

I have migrated from a late 2015 iMac to a 2019 i9-9900K CPU @ 3.60GHz with 40gb ram and have the same issue as described by odamizu in the above post, with the difference that it now occurs in both the sigil beta (running in a newly installed mohave vm) and .14. In my case it only impacts jpegs. Other image formats will insert correctly. The error message in the plugin details is:

Code:

objc[1904]: Class FIFinderSyncExtensionHost is implemented in both /System/Library/PrivateFrameworks/FinderKit.framework/Versions/A/FinderKit (0x7fffa8ae13c8) and /System/Library/PrivateFrameworks/FileProvider.framework/OverrideBundles/FinderSyncCollaborationFileProviderOverride.bundle/Contents/MacOS/FinderSyncCollaborationFileProviderOverride (0x10a57af50). One of the two will be used. Which one is undefined.

Maybe a broken Pillow library?

I will try this plugin tomorrow on my Mac dev machine and see if changing PiL/Pillow version matters. Does this plugin use PyQt5 or tk graphics?

Tk as far as I know (without looking).

Quote:

Originally Posted by asleyam (Post 3861915)

... have the same issue as described by odamizu ... In my case it only impacts jpegs ...

How interesting. I only tested it with jpgs. Just tried a png, and the plugin works fine with png. Haven't tried other image formats, but I take asleyam's word for it that this is a jpeg issue. (Also glad it's not just me :))

And I can't swear that I tested with anything other than pngs. I'll try again in a bit.

Mac Users - please make sure you have installed ActiveState's ActiveTCL for Mac version 8.6.x just to doublecheck.

Just checked again with jpegs to be certain, and it still works for me on on Windows (bundled Pillow v5.4.1) and on Linux (system Pillow v6.0.0).

I'd focus on making sure the following works in general on the Macs in question (with the bundled version of Pillow):

Code:

from PIL import Image, ImageTk

image = Image.open("image.jpg")

photo = ImageTk.PhotoImage(image)