IE9 pop up windows has black background color when showing PNG image. I found a workaround which works on Firefox 10 (and above) that also shows PNG with dark background on pop up window. Here is the code, this doesn't work for IE9:
function openLarge() {
var image = $('main-image').href;
NewWin = window.open(image,"LargeImage","resizable=yes,scrollbars=auto,status=no,width=710,height=510");
NewWin.document.writeln("<body bgcolor='#fff'>");
NewWin.document.writeln("<img src='" + image + "'>");
NewWin.document.writeln("<\/body>");
NewWin.document.close();
}
Any ideas?
The problem here is with the opening address. If you remove the image reference, and open up to a blank document, you'll have your background set.
I suspect this has something to do with the headers upon first loading the resource. With an image, the content type would be set to image/jpeg or something, but then we're attempting to manipulate the document as if it were text/html.
function openLarge() {
var image = $('main-image').href;
NewWin = window.open('',"LargeImage","resizable=yes,scrollbars=auto,status=no,width=710,height=510");
NewWin.document.writeln("<body bgcolor='#fff'>");
NewWin.document.writeln("<img src='" + image + "'>");
NewWin.document.writeln("<\/body>");
NewWin.document.close();
}
Related
Update: I used HtmlView and yes, the height is dynamic with the content,
but it seems like not support <img />
I'm currently using WebView to render the markdown content as below
<WebView :src="marked_content" height="1200px" margin="20dp" />
The result is fixed at 1200px with scrollBar as expected, but what I actually want to do is to render the whole markdown content with various height and without scrollBar.
Anyone may help, please?
PS: Any other methods which may render markdown content is welcome! Thank you!
Do you have control over the website, if Yes you can do this
https://discourse.nativescript.org/t/dynamic-webview-height/4215/2?u=manojdcoder
I have worked out how to do this without plugins.
There is a solution above which appends the URL with a hash containing the page height. It didn't work for me because I'm adding HTML code directly.
For example
src="<p>blah blah</p>"
This is a plain JS solution, so you'll have to rework it to get it working in Vue / Typescript.
Give your WebView an id, do not set the height, and add the "loaded" and "loadFinished" handlers.
For the loaded handler.
platformModule = require("tns-core-modules/platform");
var webViewSrcObj = {};
exports.webViewLoaded = function(webargs){
if(platformModule.isAndroid){console.log("IS ANDROID!!!"); return false;}
webview = webargs.object;
if(webview.height == "auto"){
webViewSrcObj[webview.id] = webview.src;
webview.src += '<script>function getPageHeight(){if(document.documentElement.clientHeight>document.body.clientHeight){height = document.documentElement.clientHeight}else{height = document.body.clientHeight}; ph = document.getElementById("pageHeight"); window.location = "pageHeight.html?height="+height;} setTimeout(getPageHeight, 1);</script>';
}
}
It checks the platform, and returns false if it is Android (Android works fine already).
Then it checks if the height is set to "auto" (which is default).
if it is set to auto, it will copy the HTML content. I'll explain more about this later. It then appends the html with some JavaScript code that calculates the view height, and then redirects to an empty page. It does this in order to use the query string for the page height. Make sure that page exists in your app folder to avoid any page not found errors!
Then for the onLoadeFinished handler...
exports.webViewLoadFinished = function(webargs){
if(platformModule.isAndroid){
console.log("IS ANDROID!!!"); return false;
}
webview = webargs.object;
if(webargs.url.indexOf("?height") > -1){
height = (webargs.url).split("?height=");
height = height[1].substr(0, height[1].length)/1;
webview.height = height; webview.src = webViewSrcObj[webview.id];
}
}
This will check to see if the query string height value exists.
If so it uses the height value to set the height of the webview.
And finally it adds the HTML content that was copied in the onLoaded handler.
My initial testing works well even with multiple webviews in a page.
I haven’t done extensive testing, but it might help to increase the setTimeout time if you experience any problems.
If anyone is able to improve this solution, please share your results.
I am trying to create a pdf from a webpage using phantomJS. I want the pdf to just be a single page long that is the same height as my webpage. If I don't set paperSize or viewportSize at all then it creates a page that is almost the right height, it is just a little short by about 100px. If I detect page height and use that to set viewportSize I have the exact same problem, it's short by about 100px. Is there a way to get phantomJS to just create a pdf based on the webpage's size? I want it to be exact because the page is a dark colour and it looks really bad to have a big white block at the end of the page (which is what is there if I add a constant to viewport height to make it fit everything in one page).
My code to find height(Note: the height is the same whether I use body or the classname below to find it):
var size = page.evaluate(function() {
var height = $('.export-athlete-detail-report').outerHeight(true);
return {width: 700, height:height};
});
page.paperSize = size;
page.render(reportFile);
Hello i Have uploaded image using ImageResizer
using this code
var instructions = new ImageResizer.Instructions
{
Width = Convert.ToInt32(Newwidth),
Height = Convert.ToInt32(Newheiht),
Format = "jpg",
Mode = ImageResizer.FitMode.Crop,
Scale = ImageResizer.ScaleMode.Both,
};
File.InputStream.Seek(0, SeekOrigin.Begin);
ImageResizer.ImageJob i = new ImageResizer.ImageJob(File, Filepath, instructions);
i.CreateParentDirectory = false;
i.Build();
i have tried using
AutoRotate = true
i still got the image rotated to horizontall
i also tried Rotate=90
the pic was rotated and lost the proportion here is how it looks like after rotate
the resized roteted picture changed it to width=296 height=437 instead of height=296 width=437
the image was taken vertically using samsung galaxy 3 buy when resized it and upload it it show horizonally
here is the original photo taken:
here is how it shown after uploaded:
You haven't posted the diagnostics page, which lists which plugins are installed.
The most likely cause is that you didn't <add name="AutoRotate" /> or new AutoRotate().Install(Config.Current) to install the AutoRotate plugin, and therefore &autorotate=true had no effect.
It's also possible that there's a new form of image metadata that we can't detect yet, but that seems less likely.
Try Autorotate property "True"; It worked for me.
&autorotate=true
we have created a tile shortcut, which is similar to pinning the IE shortcuts on the screen. We have done this through code. We want an image should come on this tile. How do we add image to such a shortcut tile. we are running an exe first on windows 7 desktop mode and then making the pin to screen event click using the shell scripting. the tile is similar to any internet address pinned on the desktop
See this sample app...
The basic code you will need to achieve this is as follows...
Uri logo = new Uri("ms-appx:///Assets/squareTile-sdk.png");
Uri smallLogo = new Uri("ms-appx:///Assets/smallTile-sdk.png");
string tileActivationArguments = MainPage.logoSecondaryTileId + " WasPinnedAt=" + DateTime.Now.ToLocalTime().ToString();
SecondaryTile secondaryTile = new SecondaryTile(MainPage.logoSecondaryTileId,
"Title text shown on the tile",
"Name of the tile the user sees when searching for the tile",
tileActivationArguments,
TileOptions.ShowNameOnLogo,
logo);
secondaryTile.ForegroundText = ForegroundText.Dark;
secondaryTile.SmallLogo = smallLogo;
bool isPinned = await await secondaryTile.RequestCreateAsync();
Hi guys I have an instance where I have a logo image as part of some artwork..
If a user uploads a new logo I have a form field which is larger than the default logo.
I then use that form field to position the new image.
The problem is I need to set the background colour of that form field to white so that it covers the old logo in the event that the new image is smaller than the old logo..
what I have done is:
foreach (var imageField in imageReplacements)
{
fields.SetFieldProperty(imageField.Key, "bgcolor", iTextSharp.text.Color.WHITE, null);
fields.RegenerateField(imageField.Key);
PdfContentByte overContent = stamper.GetOverContent(imageField.Value.PageNumber);
float[] logoArea = fields.GetFieldPositions(imageField.Key);
if (logoArea != null)
{
iTextSharp.text.Rectangle logoRect = new iTextSharp.text.Rectangle(logoArea[1], logoArea[2], logoArea[3], logoArea[4]);
var logo = iTextSharp.text.Image.GetInstance(imageField.Value.Location);
if (logo.Width >= logoRect.Width || logo.Height >= logoRect.Height)
{
logo.ScaleToFit(logoRect.Width, logoRect.Height);
}
logo.Alignment = iTextSharp.text.Image.ALIGN_LEFT;
logo.SetAbsolutePosition(logoRect.Left, logoArea[2] + (logoRect.Height - logo.ScaledHeight) / 2);
// left: logoArea[3] - logo.ScaledWidth + (logoRect.Width - logo.ScaledWidth) / 2
overContent.AddImage(logo);
}
}
The problem with this is that the background colour of the field is set to white and the image then doesn't appear.. i remove the SetFieldProperty and RegenerateField commands and the image replacement works fine..
is there a way to set a stacking order on layers?
Annotations (such as form fields) are always on top of page contents. Annotation Z order is just the order of the annotations array on a given page.
Page content Z order is just the order everything appears in the content stream. New drawing operators go on top of proceeding operators.
If you want to cover your old image, draw a white box over it and then draw the new logo over top that. No need to worry about annotations.
Actually, all you really need to do is not set the background color of the imageField. You're already scaling the new logo to match the size of the old one.
However, if you really must draw that white box, it's fairly simple:
overContent.setColorFill(iTextSharp.text.Color.WHITE);
overContent.rectangle( logoRect );
overcontent.fill();