I have been looking to dynamically scale a image map with coordinates to a div, so when re-sizing a window occurs the map and all coordinates are scaled accordingly.
any suggestions on how to do this?
i think this may work
http://blog.outsharked.com/p/image-map-resizer.html
but with the alternate option of :enter a bounding area and the map will be clipped to within that area.
my question then is how do i establish a bounding area, will it scale dynamically to that whole area?
This jQuery plugin works great for scaling and rescaling image maps on the fly. You can call this once, and it will take care of all image maps on the page. It will even rescale an image map if something happens that changes an image's dimensions.
https://github.com/stowball/jQuery-rwdImageMaps.
If you weren't just using the div to solve the image map scaling problem, you could put a blank image (a completely transparent .gif or .png) in your div with the image map applied to it and set its width and height to 100%.
Related
This is my set up. I have 2 layers with transparency (I don't know if transparency matters here). Layers are the same size, 5x7 inches. Each layer has their image (say I draw a square on it and a circle on the other).
I want to resize ONLY the square.
The problem is when I scale the square I end up either scaling both, the circle AND the square, equally and they retain their layer size, or BOTH layers are rezise and no longer 5x7 inches. I've tried 'Tools-Transform-Scale' and 'Image-Resize canvas or image', but I can't find the tool to just resize ONE of the images.
Any ideas what I'm doing wrong?
Thanks
What you want is the Scale tool, and it will resize only the active layer if it is in Scale: layer mode (you seem to have it in Scale: image mode)(*).
Otherwise, to clear up things:
Image > Canvas size changes the size of the canvas, but nothing is stretched/compressed, the layers retain their size or are extended with transparency or white.
Image > Scale image scales everything in the image (layers, channels, paths...)
(*) Also,if what you apply a transform such as Scale to an item that has the chainlink, the same transform will be applied to all other chainlinked items (other layers, but also paths).
I am trying to render a few images in NSImageView's. These images are much larger than the size of the NSImageView (which I have set to scale proportionally up or down). But, the rendered image don't look very good. For example, in this sample image, the white border seems to have jagged edges at the 12,3,6 and 9 o'clock positions. The source image seems to be fine, even when I zoom out all the way in Preview.app.
I have tried scaling the image myself (using MGCropExtensions - which sets the interpolation quality to High), but, it doesn't seem to help. I would imagine NSImageView would internally draw on device boundary automatically, so that shouldn't be an issue?
Any ideas on how to get the image rendered crisply in the NSImageView? Thanks
Source Image - It has a white border which doesn't show here (against the white background)
Rendered NSImageView screenshot
I'm adding borders to various images in a .pdf document. The borders all have the same width, but in the .pdf the borders have different widths. It is more pronounced as the width of the border increases.
Also, is there a way to move the border outside of the image, so that it is not covering any of the image using the methods of the image class? I realize I can first put a filled rectangle and then add the image on top of the rectangle as an option. Just curious as to if this can be done with methods from the Image class.
Here is the code snippet
magazine.open();
canvas = pdfw.getDirectContent();
image = Image.getInstance("a.JPG");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,10);
//canvas.addImage(image);
magazine.add(image);
image = Image.getInstance("b.jpg");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,230);
//canvas.addImage(image);
magazine.add(image);
I fear you'll have to work with the workaround you described.
There are two ways to define a border for an image:
image.setUseVariableBorders(false);
This is the default. This is what you have (even though you aren't calling the method explicitly).
In this case, the thickness of the border is distributed in a way that half of the line width is inside the rectangle and half of the line width is outside of the rectangle. Maybe that's what's causing the effect that the difference you notice is more pronounced as the border width increases.
Then there is:
image.setUseVariableBorders(true);
Now the borders will be drawn inside the area needed for the image. This is useful for tables (both PdfPCell and Image are subclasses of the Rectangle class where these methods are defined), but I fear it doesn't help you in the case of images.
So your best chance is to add the border using a workaround.
I'm using the custom UI editor to upload images to a custom ribbon tab. I need the images to look like this:
but currently they are looking like this:
These images are directly from Microsoft shapes. I tried saving them the shapes directly but they were really messy. There must be a way to get the shapes perfect as per the first image - I'm just not sure how.
Any help would be appreciated.
Your images need to be saved in exactly 16x16 pixel size. Anything else, and they will be scaled to fit a 16x16 area, and thus have fuzzy lines.
Your top image (the rectangle) measures 16 pixels wide by 10 pixels tall. If that is the extent of that image, then when you import it, it will get stretched. You need to also include the white (or empty) space around the image (in this case, above and below) when you create the image.
The example above shows the exact same 16x10 px rectangle, in two different formats. The top image included the white space above and below the rectangle and was saved as a 16x16 px image. The bottom image only had the 16x10 px rectangle and was saved as a 16x10 px image, so it was stretched by the UI editor to fit the 16x16 available space.
If have an image which is 1024x1250 and a canvas element that is 600x800, I can draw the image to the canvas centered such that the canvas is essentially a smaller view port of the larger image. I then want to allow that center point to move, thus creating the illusion that the viewport is viewing a different portion of the image.
Right now I've done this in sort of a hokey way where I redraw the portion of the image I want to see to the canvas, but I get this feeling that this isnt optimal. Is there a way to render the whole image to the canvas and then somehow "transform" my current center point so this view shift happens behind the scenes hopefully in some native layer?
You can add transformations to the context before drawing any image (rotation, scaling, translation...). What you need is the function context.translate(x,y).
Then, you only need to draw your image at (0,0)
For example, to display the bottom right portion of your image:
ctx.translate (-424, -450);
ctx.drawImage (image, 0, 0);
You can check this link https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations to see a lot of examples on context transformation.