Ok I will admit to being a noob with Gideros. I am trying to import an svg file. I followed the same procedure as you would do for a png file, that is create a texture using:
myTexture = Texture.new("orangeSquare.svg")
orangeSquare = Bitmap.new(myTexture)
stage:addChild(orangeSquare)
Unsurprisingly it doesn't work (output gives orangeSquare.svg: Error while reading image file. and program does not run) as it is not a bitmap file. Is there an alternative to import svg files? It is probably a very simple solution but I have been searching for some time without an answer. I am considering giving up on Gideros if I don't find an answer to what should be a simple problem.
You can not import the svg directly, you need to pass the svg data:
--Banana shape, SVG path format
local banana = "M8.64,223.948c0,0,143.468,3.431,185.777-181.808c2.673-11.702-1.23-20.154,1.316-33.146h16.287c0,0-3.14,17.248,1.095,30.848c21.392,68.692-4.179,242.343-204.227,196.59L8.64,223.948z"
p=Path2D.new()
p:setSvgPath(banana) --Set the path from a SVG path description
p:setLineThickness(5) -- Outline width
p:setFillColor(0xFFFF80,0.7) --Fill color
p:setLineColor(0x404000) --Line color
p:setAnchorPosition(100,100)
stage:addChild(p)
You can find more info on their wiki: https://wiki.giderosmobile.com/index.php?search=svg&title=Special%3ASearch&go=Go&fulltext=1
They also have it as a sample project when you open gideros studio.
Related
I'm converting images to icons using this code:
import PIL.image
img = PIL.Image.open ("imagepath.png")
img.save ("iconpath.ico")
This is giving me an icon file as desired, but when I try to open it an error pops up:
Paint:
Microsoft photos error:
When I try to open other icons with the same programs they work perfectly, but it doesn't with the ones I made. Does anyone know any other way or library for doing this?
Try this:
img.save('iconpath.ico',format = 'ICO', sizes=[(32,32)])
You can change size to 16,16
First time I was converting image with PIL I've used this tutorial:
Tutorial
Everything worked fine.
The image that is being converted has to have a 1:1 proportion, if not, when trying to open the generated icon it will cause errors.
I'm getting some unwanted rotation when loading images using PIL. I'm loading image samples and their binary mask, so this is causing issues. I'm attempting to convert the code to use openCV instead, but this is proving sticky. I haven't seen any arguments in the documentation under Image.load(), but I'm hoping there's a workaround I just haven't found...
There is, but I haven't written it all up. Basically, if you load an image with EXIF "Orientation" field set, you can get that parameter.
First, a quick test using this image from the PIL GitHub source Pillow-7.1.2/Tests/images/hopper_orientation_6.jpg and run jhead on it you can see the EXIF orientation is 6:
jhead /Users/mark/StackOverflow/PillowBuild/Pillow-7.1.2/Tests/images/hopper_orientation_6.jpg
File name : /Users/mark/StackOverflow/PillowBuild/Pillow-7.1.2/Tests/images/hopper_orientation_6.jpg
File size : 4951 bytes
File date : 2020:04:24 14:00:09
Resolution : 128 x 128
Orientation : rotate 90 <--- see here
JPEG Quality : 75
Now do that in PIL:
from PIL import Image
# Load that image
im = Image.open('/Users/mark/StackOverflow/PillowBuild/Pillow-7.1.2/Tests/images/hopper_orientation_6.jpg')
# Get all EXIF data
e = im.getexif()
# Specifically get orientation
e.get(0x0112)
# prints 6
Now click on the source and you can work out how your image has been rotated and undo it.
Or, you could be completely unprofessional ;-) and create a function called SneakilyRemoveOrientationWhileNooneIsLooking(filename) and shell out (subprocess) to exiftool and remove the orientation with:
exiftool -Orientation= image.jpg
Author's "much simpler solution" detailed in above comment is misleading so I just wanna clear that up.
Pillow does not automatically apply EXIF orientation transformation when reading an image. However, it has a method to do so: PIL.ImageOps.exif_transpose(image)
OpenCV automatically applies EXIF orientation when reading an image. You can disable this behavior by using the IMREAD_IGNORE_ORIENTATION flag.
I believe the author's true intention was to apply the EXIF orientation rather than ignore it, which is exactly what his solution accomplished.
I have been doing a ton of searching but cant quite find the answer to this one.
I have a series of relatively simple SVG images. I have drawn SVG rectangles over key areas of the images that I am interested in and would now like to extract those areas as PNG images. I have no idea the best way to approach this problem.
Idea 1) Convert the whole SVG to PNG then use say PIL to crop the image down after somehow converting the SVG rect coordinates to PNG coordinates. I am starting to work towards this method now, but I am hoping there is a better, and/or easier way to do this!
I am using Python 3.7 for this.
Edit 1:
This is a screen shot of what I am looking at. The original image is SVG, I would like to extract the areas under the green rectangles as PNG images.
Edit 2:
Working from Idea 1, I have the following code that basically sets the viewBox on the SVG image to one of the green rectangles, then sets the width and height of it. From there I am using CairoSVG to export the SVG as PNG.
import cairosvg
import xml.etree.ElementTree as ET
...
with gzip.open(fileObj.filePath,'rb') as file:
svg=file.read()
svg=svg.decode('utf-8')
svgRoot=ET.fromstring(svg)
ET.register_namespace("","http://www.w3.org/2000/svg")
ET.register_namespace('xlink', "http://www.w3.org/1999/xlink")
annots = meta['annots']
for a in annots:
r = ET.fromstring(a['g'])
vb=" ".join([r.get('x'),r.get('y'),r.get('width'),r.get('height')])
svgRoot.set("viewBox",vb)
svgRoot.set("width",'128px')
svgRoot.set("height",'128px')
svg = ET.tostring(svgRoot, encoding="unicode")
cairosvg.svg2png(svg,write_to="/home/test.png")
Unfortunately it is EXTREMELY slow! On the order of more than a minute to extract two PNGs. The SVG files are quite large (2 - 3 mb zipped) and very detailed. I am not certain how CairoSVG works, but does it render everything in the SVG even if it isnt visible before saving the visible part to PNG?
Any advise on optimising or speeding this up would be a huge help.
This worked for me in the end, though it is quite slow on larger SVG images:
import gzip
import cairosvg
import xml.etree.ElementTree as ET
...
with gzip.open(fileObj.filePath,'rb') as file:
svg=file.read()
svg=svg.decode('utf-8')
svgRoot=ET.fromstring(svg)
ET.register_namespace("","http://www.w3.org/2000/svg")
ET.register_namespace('xlink', "http://www.w3.org/1999/xlink")
annots = meta['annots']
for a in annots:
r = ET.fromstring(a['g'])
vb=" ".join([r.get('x'),r.get('y'),r.get('width'),r.get('height')])
svgRoot.set("viewBox",vb)
svgRoot.set("width",'128px')
svgRoot.set("height",'128px')
svg = ET.tostring(svgRoot, encoding="unicode")
cairosvg.svg2png(svg,write_to="/home/test.png")
I am trying to write images over each other. Ideally, what I want to do is to write every image in one folder over every image in another folder and output every unique image to another folder. So far, I am just working on having one image write over one image, but I can't seem to get that to work.
import numpy as np
import cv2
import matplotlib
def opencv_createsamples():
mask = ('resized_pos/2')
img = cv2.imread('neg/1')
new_img = img * (mask.astype(img.dtype))
cv2.imwrite('samp', new_img)
opencv_createsamples()
It would be helpful to have more information about your errors.
Something that stands out immediately is the lack of file type extensions. Your images are probably not being read correctly, to begin with. Also, image sizes would be a good thing to consider so you could resize as required.
If the goal is to blend images, considering the alpha channel is important. Here is a relevant question on StackOverflow:How to overlay images in python
Some other OpenCV docs that have helped me in the past: https://docs.opencv.org/trunk/d0/d86/tutorial_py_image_arithmetics.html
https://docs.opencv.org/3.1.0/d5/dc4/tutorial_adding_images.html
Hope this helps!
I'm trying to use lottie to animate an SVG animation created in After Effects. I use the bodymovin extension to export the JSON data file. But, I also noticed the export includes some PNG images. I'm also getting console errors that said PNG's can not be found.
Why is it exporting PNGs as I'm using SVG (an AI file) in AE. Below is my code, and the error.
index.ts
import * as lottie from 'lottie-web';
import * as header from './assets/header.json';
import './css/base.sss';
var animation = lottie.loadAnimation({
container: document.getElementById('header'),
animationData: header,
renderer: 'svg/canvas/html',
autoplay: true
});
But I'm getting the following errors that the images can't be found. Why is bodymovin exporting/looking for pngs? I require SVG's.
Chrome console errors (sorry can't embed until 10 rep)
I found the problem. I have to convert paths to shapes in AI as noted here.
In Adobe After effect, you can use Create Shapes from vector layer
Another way I found was to search the exported .json file for the .png extension and replace the found extensions with .svg. Making sure to add the .svg files to the same directory.
I used this bodymovin render option:
I did my search in the .json file in Dreamweaver like so:
I hope this helps someone!!!