I am using html2canvas to capture entire of webpage but got problem some image can not draw or draw half of image. See my attachments.
This is my code
var config = {
proxy: base_url + "proxy",
logging: true
};
html2canvas(document.body, config).then(function (canvas) {
my_image = canvas.toDataURL("image/jpeg");
resolve(true);
});
I tried html2canvas 1.0.0-rc.1 and html2canvas 1.0.0-rc.5 but not luck.
Also try set image timeout option, also try to remove some html element to make sure html page not too large but same result.
This is origin image
This is the capture result (please don't mind the line in image, I just added it)
Any help!
After all, I found problem is max canvas height around 16.000px, my canvas went to 30.000px height.
So I split to many parts and store it.
Related
I'm reading an imageOverlay URL from an ArcGIS webserver that uses the leaflet getBound() coordinates as part of the URL (we have large maps that are filtered for the current window 'extent'). Apologies for not including the actual path (I'm working with sensitive client data). Eg:
http://myarcgiswebserver.com/MapServer/export/dpi=96&format=png32&bbox=27.119750976562504%2C-31.194007509998823%2C32.39044189453126%2C-29.692824739380754&size=1719%2C434
[bbox] = current imageBounds
When dragging my map the imageOverlay url is updated correctly but my leaflet window is no longer aligned to the imageBound values that were set when first adding the imageOverlay which results in a skewed output (this is my assumption):
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Am i approaching this problem incorrectly or would the introduction of a function to update the current imageBounds resolve this? Perhaps not a new function but the expansion of setUrl with additional parameters...?
Many thanks for any feedback...
As #ghybs pointed out, your use case might be better served by using the WMS
interface of your ArcGIS server.
Anyway, you say
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Well, that glitch is due to you probably doing something like:
Remove old overlay
Add new overlay
Wait until the image is received from the network
Wait one frame so the new overlay is shown
and instead you should be doing something like:
Add new overlay
Wait until the image is received from the network
Remove old overlay
Wait one frame so the new overlay is shown
The problem is just the async wait and the possible race conditions there, but should be easy to hack together, e.g.:
var activeOverlay = null;
var overlayInRequest = null;
map.on('moveend zoomend', {
// If we are already requesting a new overlay, ignore it.
// This might need some additional debouncing logic to prevent
// lots of concurrent requests
if (overlayInRequest) {
overlayInRequest.off('load', showOverlay);
}
overlayInRequest = L.imageOverlay( computeUrl( map.getBounds() ), myOverlayOptions );
overlayInRequest.on('load', showOverlay);
});
function showOverlay(ev) {
activeOverlay.remove();
activeOverlay = overlayInRequest;
activeOverlay.addTo(map);
overlayInRequest = undefined;
}
If you use an ImageOverlay but change its url dynamically, with a new image that reflects a new bounding box, then indeed that is the reason for the behaviour you describe: you display an image that has been generated using a new bbox, but positioned in the initial bbox, since the image overlay remains at the same geographical position on the map.
Instead, it sounds to me that you should use a TileLayer.WMS.
It would automatically manage the bounding box update for you. You may need to find the correct options to fit your service provider required URL syntax, though.
Example: http://playground-leaflet.rhcloud.com/yel/1/edit?html,output
I am creating a pdf-document. First I add a table and some Texts to the PdfWriter. Now I want to add a costum template (including images and texts): I have to get the direct Content, which ist a layer over the PdfWriter-layer:
over= PdfWriter.getDirectContent();
I want to set the template exactly after the content on PdfWriter-layer.
I can use
writer.getVerticalPosition(true)
for my calculation of y-Position on PdfWriter-layer.
This way I can add the costum template to the upper layer at that position. Now back to PdfWriter-layer how can I set the position of PdfWriter-layer after the tempalte on over-layer?!
Can somebody help?
Thanks in advance.
Mixing content added with document.add() and direct content us always a delicate operation. You need to know the height of the custom template and then add some white space that matches that height. However: what are you going to do if the content of the custom template doesn't match the page?
I would advise against your plans, and I would recommend another approach.
I am assuming that your custom template is a PdfTemplate object. In that case, you can wrap this object inside an Image object, and use document.add() to add the template.
See for instance: Changing Font on PDF Rotated Text
In this example, we create a PdfTemplate with a bar code and some text:
PdfTemplate template = canvas.createTemplate(rect.getWidth(), rect.getHeight() + 10);
ColumnText.showTextAligned(template, Element.ALIGN_LEFT,
new Phrase("DARK GRAY", regular), 0, rect.getHeight() + 2, 0);
barcode.placeBarcode(template, BaseColor.BLACK, BaseColor.BLACK);
We want to add this template to a document with document.add(), so we wrap the template inside an Image object:
Image image = Image.getInstance(template);
We can now add this image to the document:
document.add(image);
Afterwards, we can add extra content:
Paragraph p3 = new Paragraph("SMALL", regular);
p3.setAlignment(Element.ALIGN_CENTER);
document.add(p3);
That content is added under the template at the right position. You don't need to worry anymore about getting the Y position with getVerticalPosition() and you don't need to worry about setting the Y position after adding the template. If the template doesn't fit on the current page, it will automatically be moved to the next page.
Important: Maybe you are worried about the resolution of your template. You shouldn't be. If the template consists of vector data, wrapping that data inside an Image object won't change it into raster data. The vector data will be preserved. This is important in the bar code example, because you don't want the quality of your bar code to deteriorate by making it a raster image.
I'm wondering if it is possible to get the charts for Google Trends responsive with the current given code (by adding an 'unknown' parameters)
Example
<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=hoest,+Bronchitis,+Bronchiolitis,+RSV&geo=BE&date=1/2011+49m&cmpt=q&tz&tz&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=900&h=330"></script>
It is anyway not working when putting '100%' as width value.
But anyone aware of an extra parameter to change the unit you want to use (which is px by default)?
Try getting the screen width with javascript on page load, then dynamically create the embed code replacing the defined width parameter with the actual screen width.
<script>
//function which gets screen width
function getWidth() {
if (self.innerHeight) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
//define screen width variable. Subtract 15 pixels from width just to be on the safe side and reduce chance of getting a horizontal scroll bar
var screenWidth = getWidth()-Number(15);
//replace the following URL with your own. Be sure to keep the modified part of the string in tact where it replaces the width with screenWidth variable
var embedCode = "//www.google.com.au/trends/embed.js?hl=en-US&q=mick+fanning,+wwe&geo=ZA&date=now+7-d&cmpt=q&tz=Etc/GMT-10&tz=Etc/GMT-10&content=1&cid=TIMESERIES_GRAPH_0&export=5&w="+screenWidth+"&h=330";
//write this new code to browser. Split '<script'> tags to prevent browser errors when writing.
document.write('<scr'+'ipt type=\"text/javascript\" src=\"'+embedCode+'\"></scr'+'ipt>');
</script>
Note the width of the chart will not adjust if the browser window changes. (ie, user flips their phone sideways).
If you click the menu on the top right of the trends graph there is an option to embed the graph in Desktop or Mobile views. Select Mobile and it will do the responsiveness for you and give you the code snippet.
I need to change the small image size on Magento community.
Here´s why, it does not fit the global product window.
link here
I tried at \app\design\frontend\default\magik_pinstyle\template\catalog\product\list.phtml
and flushed the image cache but I does not work.
I can see it`s a 265px image but when I search for a resize(265) I dont find anything.
This would actually be located in app/design/frontend/default/magik_pinstyle/template/catalog/product/view/media.phtml. Copy the file over from app/design/frontend/base/default/template/catalog/product/view/media.phtml if you don't have it on your template. On line 68 (in the base media.phtml) you'll find this line:
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" itemprop="image" />';
Your photos don't fit the frame because your .product-view .product-img-box .product-image CSS is set to 320x300px (width/height). If you want your pictures to fit, you need to make sure the resize is set to the same size of the frame, and you should probably square off your frame.
If you want the larger frame, change your image CSS to 320x320px or 300x300px and change the above line to resize(320) or resize(300), respectively.
If you want to keep the 265x265px image size, change your image CSS to 265x265px and leave it as is.
Edit
It is still using a file in 265x265px resize cache.
You should deliberately clear out everything in your /media/catalog/product/cache folder, first the media.phtml checks to see if a resize already exists and falls back to that. If one isn't found, then it runs the resize.
You are editing the file found in app/design/frontend/default/magik_pinstyle/template/catalog/product/view/media.phtml, correct? If altering the existing resize function doesn't work after completely emptying the cache you can add the ->resize(300) function to line 15:
$this->helper('catalog/image')->init($_product, 'image')->resize(300)
Lastly, if you have a custom lightbox or theme section in your settings, check for anything you may have missed to alternately set dimensions.
Make sure to refresh your cache, you should clear your image cache too.
I know that this is an old post but but I want to add something that seems to be left out off most of these responses, you must enlarge the container that the image is contained in otherwise the image will not be enlarged.
I followed the first part of Jason's answer above by going into
app/design/frontend/default/magik_pinstyle/template/catalog/
/view/media.phtml. Copy the file over from app/design/frontend
/base/default/template/catalog/product/view/media.phtm
and changing line 32 and 33 to
$bigImageX = 608; from $bigImageX = 308;
$bigImageY = 608; from $bigImageY = 308;
and nothing happened after flushing of the cache both magento nor browswer.
I then went into dev tools and enlarged the width of
<div class="produt-img-box">
which increased the size of the image to my desired size.
Just to be clear, I also had to shrink the size of the
<div class="product-shop"> to totally accomplish my goal of resizing the image.
I have been able to create portrait pages, and landscape pages in separate documents, but now require to do this in one document. I am using ITextSharp library and the document.setpagesize seems to apply to all pages. Is this correct?
I was using PDFLib and changing page orientation was not a problem in that library.
Any suggestions?
Paul.
It should only apply to pages rendered after that call.
Document doc = new Document(PageSize.WHAT_EVER);
PdfWriter writer = new PdfWriter( doc, outputStream );
doc.open();
// so long as you set the page size before add()ing anything, it should ignore the
// page sized used in the constructor.
doc.setPageSize(PageSize.LETTER); // 8.5" x 11"
// actually, I think you need to call newPage or actually add enough stuff to start a new page
// for setPageSize to take effect. setPageSize by itself won't do the trick.
doc.add(stuffToFillALetterPageButNotStartANewOne);
doc.setPageSize(new Rectangle(792f, 612f)); // 11" x 8.5"
doc.add(moreStuffToFillALandscapePageThusStartingANewPage);
doc.close();
The resulting PDF should have two pages. The will be 8.5x11, the other 11x8.5. Note that iText[sharp] won't generate rotated pages (8.5"x11" # 90 degrees (or 270... shudder)). It's... sharper than that.
Dealing with rotated pages is Not Fun. At least I've never run into one that was 8.5x11 at 180 rotation in my TOO_MANY_YEARS of experience with PDF. I'd just have to fly into a murderous rage at that point. Or maybe I should generate some PDFs that way just to see who I could catch with their pants down.
[insert fiendish cackle here]