Using ImageProcessor.Web (http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/) resize module, I'm able to get the image cropped to a defined size, like:
<img src="~/Content/img/fiji-01.jpg?width=500&height=500&mode=crop¢er=0.1,0.1"/>
But how do I zoom in the picture twice the size and the crop?
Tried something like:
<img src="~/Content/img/fiji-01.jpg?mode=crop¢er=0.9,0.9&heightratio=3&widthratio=3&height=500" />
It didn't help.
I had to set up Umbraco and use GetCroppedUrl method to see how it works. It happens that we use the crop module followed by resize module, like:
<img src="~/Content/img/fiji-01.jpg?crop=0.23159636062861869,0.061207609594706371,0.023986765922249794,0.19437551695616212&cropmode=percentage&width=500&height=500" />
or
<img src="~/Content/img/fiji-01.jpg?crop=50,50,200,200&width=500&height=500" />
Related
I'm using backload ( https://github.com/blackcity/Backload ) for image upload. It works fine. Here are the 2 lines in the Wev.backload.config
<images width="3072" height="2304" dpi="96" canvasColor="#00ffffff" forceImageType="image/png" resizeMode="ratio" maxFileSize="4194304" />
<thumbnails path="_thumbs" width="192" height="144" dpi="96" canvasColor="#00ffffff" resizeMode="ratio" imageType="image/png" />
However, I found that if upload an image whose width is < its height, the uploaded image will be automatically rotated. For example, the original image is (3072,2304), width 3072, after uploaded, the size becomes (2304,3072). It is rotated automatically.
Is there a way to keep the width/heigh ratio and without rotating it?
it turns out this is a bug in backload. and it is fixed in new package. the detail is on github
https://github.com/blackcity/Backload/issues/107#issuecomment-251363262
I am working on optimizing page load
First option i went for is base64 conversion
I have 18 small images to be loaded in home page
Since base64 is 1.3x the actual image size i went for image sprites
After spriting the images, i am able to use it for replacing background-image , background-position for div, but i am not able to use sprited image for replacing img and asp:image tags. I need to have them as <asp:image> as there are some code behind functions attached to it
You can add transparent images for all asp:Image controls. They will render as HTML images. And then you should make sure that you add the correct css class with the appropriate sprite for each.
See an example at http://jsfiddle.net/9wo2mL32. Also, make sure you add width and height to the class (or to the asp:Image control):
<asp:Image ID="imgImage" runat="server" Height="100" Width="100" ...
Yes you can use sprites on images, the key points is to add height/width and an empty/transparent image 1pixel x 1pixel on the src so can load something and show something as image tag, because with out valid src browsers may show error img, or nothing
The rendered results can be like:
<img class="rgoto" src="spacer.gif" height="9" width="8" >
and style :
img.rgoto {
background: url(sprite.gif) no-repeat -230px -20px;
height: 9px;
width: 8px;
}
I want to show an image in a WebBrowser
<html>
<body style="margin:0px;padding:0px;border:0px">
<img src="http://phaseoneimageprofessor.files.wordpress.com/2010/09/logo_image_professor_22.jpg"/>
</body>
</html>
I want width of image grow and be the same as width of visible window (it's not full screen). it's height should grow too without loosing its shape.
var htmlString = "<html><body style="margin:0px;padding:0px;border:0px"><img src="http://phaseoneimageprofessor.files.wordpress.com/2010/09/logo_image_professor_22.jpg"/></body></html>"; //It's missing some backslashes, you got the idea.
webBrowser.NavigateToString(htmlString);
currently it just appears at the corner of the page, and this is not what I want.
How can I achieve that? thanks.
<img src="image.jpg" width="100%" />
By default in HTML if you specify either height OR width (but not both) for an image, the other attribute will be scaled automatically to keep the same aspect ratio.
I have some CSS (Below) defining an images size
#latestImages img
{
height: 95px;
width: auto;
}
This is affecting these images:
<img src="#images.ImagePath" alt="#images.NameOfImage" />
When i set an onmouseover event to this image like so:
<img src="#images.ImagePath" alt="#images.NameOfImage" onmouseover="this.width=100;this.height=100;" onmouseout="this.width=200;this.height=200;"/>
The images height and width do change in the html when the source is viewed but there is no visible change, but when i removed the css the changes did occur.
Does anyone know why this is? And is there anything I can do different to keep the css as is and have javascript enlarging the image?
Thanks in advance!
You can use this format in your onmouseover handler: this.style.width="50px".
Or better yet, don't put your JS in your HTML, and write a function for what you are trying to do.
onmouseover="this.style.width='100px';this.style.height='100px';"
onmouseout="this.style.width='200px';this.style.height='200px';"
Styles need units. In this case px. Otherwise it could be pt, in, or em.
I've already added an background image to my pdf using :
<fo:simple-page-master master-name="LetterLandscapePortada" page-height="21.59cm" page-width="28.94cm" >
<fo:region-body margin="0cm" background-repeat="no-repeat" background-image="url(file://D:/XSL/fondoPortada.jpg)" />
</fo:simple-page-master>
But I'm having problems in order to "auto-fit" the image to the page because the image is larger than the page size.
Does is posible add a property in order to fit the background image to the page?
The spec for xslfo doesn't specify anything for this.
See: http://www.w3schools.com/xslfo/obj_region-body.asp
However, there are many ways around this. In xslfo you could add an image before any text is displayed and set its dimensions accordingly, it would then seem to be a 'background' image (with the lowest z-index). A non xsl solution would be to modify the image itself by adding the proper white space/resize in an editor like GIMP and then proceeding as you already do. You can also use the 'position' attributes though they will be of little help if you don't modify the image.