I want to position several images inside a div block. But div CSS properties not applied to image.I want image in round shape.
For round shape images, you have to use two images.
One is the original image,
and in the second image you should have the only shape area transparent.
Then put the second image on the top of your original one. You will see the result you want.
Related
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 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%.
Is this combination possible? I have a retro-style spritesheet, however I'd like to use SVG with it in order to apply some effects such as shadows, outlines, and other things. Don't question it.
I know canvas is an alternative, however for this project I'd prefer to use SVG. One major issue is in the way, however: taking individual sprites from a spritesheet. Additionally, I use 1x1 pixel sprites but enlarge the spritesheet to make them 6x6 via hidden canvas, so I'm also working with an image element as opposed to linking to an image outside of the page.
Is it possible to choose regions of the image to use in SVG? The SVG image element doesn't appear to offer such options.
You can use a clipping path with your image, clipping exactly to the contents you want. For example:
http://phrogz.net/svg/image-spritesheet.svg
If you're only targeting Firefox, you can instead use: image-spritesheet-simple.svg
Alternatively, you can place your <image> in a new <svg> element inside your SVG. The inner <svg> establishes a new viewport, and you can then use the viewBox of that to only display a rectangular region from your image (more like a normal sprite sheet).
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.
I have 19 images and I would like to be able to crop them all the same way, cropping off the same area on each image. But I need to look at the first image and determine what part of the image I want to crop. Then I would like to apply that crop to all the other images. My idea is that I could save the four corner points from the first crop and then iterate though the other 18 images using the 4 points to properly set up the cropping. Does this seem like a good approach? Or does anyone know of a Matlab program that does this already?, I search already.
Use IMCROP function from Image Processing Toolbox.
For the first image run it interactively and save the selected rectangle coordinates as a variable (rect):
[im_cropped rect] = imcrop(im);
Then for other images apply that coordinates:
im_cropped = imcrop(im, rect);