I'm having an issue cropping an image and then resizing an image using ImageResizer 3.4.3 within an Umbraco site.
What I'm trying to achieve is a square crop that is anchored to the right of the image, and then resized to a specific size.
For example, with this original image:
I'm trying to get an output looking like the highlighted section of this image:
From my understanding of the ImageResizer documentation, I should be able to do this in two ways - either using:
?crop=(500,0,0,0)&width=150 or
?width=150&height=150&mode=crop&anchor=topright
The results don't seem to match what I want though - the first outputs this, applying the resize before the crop:
And the second method outputs this - ignoring the anchor parameter (centering the crop):
The only way I can get it to work is to use percentage cropping - unfortunately this won't be feasible with many of the images i'm working with (variable width):
?crop=(50,0,0,0)&cropxunits=100&cropyunits=100&height=150
Am I missing something? Should it be possible to do this?
Here is the debug output from ImageResizer.
After Nathanael Jones' comment I realised it must be a problem with Umbraco (7.2.2). I tried moving the ImageResizingModule to a higher position in the order of http modules in the web.config, and everything started working as advertised. It looks like Umbraco's ImageProcessorModule was messing with the input parameters.
All i had to do was move the ImageResizingModule above the ImageProcessorModule
<add name="ImageResizingModule" type="ImageResizer.InterceptModule"/>
<add name="ImageProcessorModule" type="ImageProcessor.Web.HttpModules.ImageProcessingModule, ImageProcessor.Web" />
Related
So I have a programming project that I have to do for my school. What I have to do is setup a 2 player dice game. I could have gone the easy way and just display the number of the 2 die, but I was thinking of using images that I made in photoshop instead. However, the problem is that I do not know how to change images in an efficient way.
My first option is using the visibility tag on several images laid on top of eachother and change it accordingly as such
image1.visible = false
image2.visible = true
However, I do not think that is very efficient. Images also do not support changing the image with code from my research.
Secondly, I could use a PictureBox instead, which do support changing the image as the program is running. However, it does not support transparency, and the die images are transparent. Plus it gives me the invalid image file error, I guess due to the transparency in the gif files.
There is also the cheap workaround of me making the background of the images the same as the form background.
So is there a more efficient way I am missing out? I know that the cheap workaround would be the best option for this case, but I would like to have this knowledge for future use like semi-transparent pixels that blend in and such.
And before you ask, no, I cannot use another programming language as visual basic 6 is what my school teaches. Thankfully they are changing it soon, but I am stuck with this for now.
Turns out you CAN change the pictures of Images, while keeping transparency and stretch. I am going to properly show it:
Image1.Picture = LoadPicture("YOURPATHHERE.gif")
This is what I get for believing what I've seen on some forum.
Also, the error of invalid image file was due to the images being corrupted for some reason.
I am currently using Xamarin.Forms and I would like to import an image and be able to add markers to it. Similar to what the mapping apps do, but want to be able to do it from an uploaded image or from taking a photo. I would also Like to be able to set a scale on it after the image was uploaded by placing two or more markers and then entering a measurement between those markers.
When displaying an image/photo I would like to place markers on them that would have more info about the pinned location on the image. These pins must be saved in a database so that the next time it's opened the markers will be in the correct location as they were placed the first time.
If anyone knows how I can get started on this, or know of any libraries that allow you to this, it would really be appreciated.
.
Update
Loading the image from file, camera or url is simple enough.
Zooming in and out after the image is loaded was simple enough too. Altering the scale size of the Image by making use of the PinchGesture.
Moving the image around ended up being simple too, and it was achieved by using the PanGesture and altering the TranslationX and TranslationY.
.
.......Still searching for a working and reliable solution for adding Pins/Markers at a location on the image and the markers need to have a click or tap event attached to it.
We have been using the uCKEditor plugin for umbraco for a few months now. We also installed a plugin for it called Image Maps.
Recently, one of our content editors noticed a sharp drop in performance while editing some pages. After testing it for a while I noticed that removing all image maps from the source completely solved the performance problem, the editor was responsive lightning fast again.
An example of an imagemap added by the plugin:
<img src="image.jpg" usemap="#imgmap20156281337" />
<map id="imgmap20156281337" name="imgmap20156281337">
<area coords="75,74,183,206" href="http://www.example.com" shape="rect"/>
<area coords="408,169,533,368" href="http://www.example.com" shape="rect" />
</map>
In reality, the plugin simply adds a few lines of HTML to the image, so I couldn't understand why it would affect performance so severely.
Therefore, I decided to check where the breakpoint would be for adding imagemaps. In a page with 5 images, I started adding imagemaps to those images via the plugin.
The first imagemap showed no performance drop. After the second image map, a slight delay started to manifest with every user action. Every imagemap afterwards made the delay progressively worse to the point where at 5 images with 5 imagemaps, the editor takes over 4-5sec to just move the cursor 1 character distance left/right. This is what my content editor colleague experienced.
I tried adding the imagemaps manually(without the plugin) and I noticed that we still get the performance issues. However, the editor seems to run fine in <>Source view, but as soon as we switch back to default the performance drops dramatically. It seems that the editor is having problems rendering the imagemaps on top of the images.
What is causing this horrible performance when working with multiple image maps in the same editor?
Is there anything we can do about it?
I discovered what was causing the problem!
While communicating with the creator of the imagemaps plugin, he referred me to his test page: http://www.martinezdelizarrondo.com/ckplugins/imagemaps.demo4/
When we are working locally in uCKEditor and we insert an image from the media picker, the image gets inserted using a relative local path like:
src="/media/1370030/4483_a.jpg"
Then I tried to paste the same html to the remote test page, and naturally, I had to include the full domain path to the image:
src="http://www.dphtrading.dk/media/1370030/4483_a.jpg"
The first thing I noticed was that locally, uCKEditor draws borders on the lines specified in the imagemaps for a specific image. I took a screenshot to illustrate:
http://imgur.com/dUJMzWn
While on the remote test server, there were no borders and no performance problems. So I inserted the full domain path for the images into our uCKEditor and this solved the performance problems (and removed the imagemap borders for some reason).
It looks like uCKEditor and probably CKEditor in general doesn't like the combination of relative file paths and imagemaps for the same image.
Since some days I'm experiencing this problem.
Here is my debug
The image provided is bigger than 200x200 px, it has unique link and there is any redirection on that page.
Linter response is 200.
When I copy and past page's link on fb it give me the choice between 3 images that are smaller than 200x200px and the one I've provided is ignored.
But If I try to share it through "Like button" or "Send button" it works fine.
It sounds like a fb Bug.
Thx
I solved using informations from this and this posts.
You can try using an image that is bigger than 200x200, with dimensions multiple of 100, and squared.
Other useful stuffs are using jpg extension, host the image in the same server of the website and avoid any "strange" chars in filename.
I tried many of the suggestions on this post and others to no avail. The thing finally worked for me (which I have not seen elsewhere) was to add the correct prefix to the element which I previously was missing entirely.
<head prefix="og: http://ogp.me/ns#">
Not sure if that actually fixed the problem for good or it just jogged the debugger into re-scanning the image (properly) but hopefully it helps someone else.
I got it done by renaming the image and the og:image url. Give it a try.
I have been struggling with this for a while too. I have tried all shapes and size for the image, renaming it, adding specific og:image:height and :width tags, etc.
The way I 'solved' it is just putting the image I want to show up in the website's root directory and point in og:image to another (1500x1500, btw) image. Facebook linter then tells me that it will use the image in the root directory. And that just works fine ;-)
Even if your image size is not in multiples of 100, it should work if your image is in jpg or jpeg format.
If your image is in png format, no matter what the size is, it will not work. This is based on my tests only. I would like to hear from other devs here.
I use png's all the time. I always use 1920 x 1080 because they look so good on Facebook shares. 85% of the time they work, sometimes they don't. Sometimes I delete and reload the same photo without renaming or changing a thing and it all of a sudden works. I'm not a real dev so that's all I can offer.
I tried most of these suggestions - double-checked the <head> prefix, tried adding the javascript sdk, tried square images, sourcing from different locations, simplifying the file name...
What finally worked was making sure an <img> tag for the same image appears in the body! I hid it with CSS / inline style.
I want to draw some shapes over an image.
After the image is loaded and added to the layer, I use the moveToBottom() function, which works for shapes but doesn't seem to work with images.
I've tried to use moveToTop() on the shapes, but still no luck.
Important note: I have to keep them on the same layer, so the obvious solution to put the image in another layer is not an option.
http://jsfiddle.net/hukNL/
This concept shows that layering functions work, so the error is somewhere else in your code.
First of all, you want to be using the newest KineticJS 4.3.1, then you want to make sure that if you are dragging images that you disable putting them in the dragOnTop layer that is now featured in the newer releases. Lastly, if nothing else works, then you could manually debug your code by checking the z-index of each item by using:
.getZIndex()
Also, if you would like more help, post some code so others can help you debug it.