There is a div element, add img Child element with appendChild fun.
div overflow is hidden.
the img display a picture, and can be moved, zoomed and scaled.
if the img is bigger than div, and be moved or zoomed or scaled,
then i use html2canvas to the image, the img have be cut which the size is the same div.
if i set useOverflow true, have the problem
if i set useOverflow false, the img cannot be hidden.
html2canvas(document.body, {
allowTaint: true,
useCORS: true,
useOverflow: false,
onrendered: function (canvas) {
var blob = canvas.msToBlob();
need
overflow: hidden;
not
overflow-x: hidden; overflow-y: hidden;
Related
I'm creating labels for polygons with the following code:
L.marker(polygon.getBounds().getCenter())
.bindTooltip('County Name', {permanent: true, direction: 'center'})
.addTo(mymap);
However, the result isn't exactly what I'd call centered. Like the majority of the tooltip is on the right side of the marker whereas I'd expect the marker to be smack dab in the middle of the tooltip.
Any ideas as to what I can do to improve the situation?
If I can get this working I'll hide the marker by doing {opacity: 0} but if I do that now it'll look off center without a frame of reference.
If you want to add labels to the polygon you can use instead customised Tooltip.
In your Javascript code :
let custom_popup = L.popup()
.setLatLng(polygon.getBounds().getCenter())
.setContent('County name')
.addTo(map);
Then you can customise to make it look like a Marker using CSS :
.leaflet-popup-close-button // we remove the X to close the popup
{
display: none;
}
.leaflet-popup-tip // We remove the arrow pointing at the coordinates
{
display: none;
}
.leaflet-popup-content // We center the text inside the Tooltip
{
text-align: center;
}
Here's the result :
In my Ionic app, I have a modal view. I want its background to be a CameraPreview block but it's not working when I set the toBack property to true.
Here are my cameraOptions:
public cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: 300,
camera: 'rear',
tapPhoto: true,
previewDrag: false,
toBack: true,
alpha: 1
};
When I set toBack to false, the cameraPreview works fine but I want to access my navbar and some buttons above the preview, so I need to find what doesn't work here.
I'll be happy to provide you with more info if needed.
Thanks!
Are you sure it is not hidden behind another HTML element?
have you tried setting the background-color?
html, body, .ion-app, .ion-content {
background-color: transparent;
}
Add this to page's constructor where you're using the camera.
document.body.style.backgroundColor = "transparent !important"
I was using a dark/light theme mode in my variables.scss and everywhere I tried to applying the
html, body, .ion-app, .ion-content {
background-color: transparent;
}
or
<ion-content [fullscreen]="true" [ngClass]="{'custom-ion-content': true}">
.custom-ion-content {
--background-color: transparent !important;
}
simply didn't work. This solved it for me.
How to position the iFrame in the top of the viewport? 20 pixels down?
Here is my Fancybox code:
$("[data-fancybox]").fancybox({
iframe : {
preload: false
},
.....
});
The content (except images) is centered using CSS only, therefore it would be something like this:
.fancybox-slide--iframe .fancybox-content {
vertical-align: top;
margin: 20px;
}
Html2Canvas is not able to render multiple DIVs properly when
The number of DIVs increases significantly, OR
The size of each DIV increases significantly (then it fails with fewer number of DIVs)
I am using Html2Canvas Plugin to convert div (containing image) to canvas. I have implemented a recursive function to convert multiple images at a time (see code below).
JavaScript
//counter
var div_number = 0;
function image2canvas() {
var img2canvasObj = {
logging:true,
onrendered: function (canvas) {
canvas.id = "cvs" + div_number;
$("#canvasid").append(canvas);
//incrementing the counter
div_number = div_number + 1;
if (div_number <= 18) {
html2canvas($("#tempDivforpublishplan" + div_number), img2canvasObj);
}
if (div_number === 19) {
<Some Ajax Call>
}
}
};
html2canvas($("#Content_to_convert" + div_number), img2canvasObj);
}
The HTML for multiple images (which I am converting to canvas) is as follows. Note that I am using images as background of div elements. Each of these elements have a base64 string appended to the image URL which is used to convert the image to canvas.
HTML:
<div id="tempDivforpublishplan0" style='background: url("data:image/png;base64,iVBORw0KGgo…..") 0% 0% / 634px 2266.26px; width: 634px; height: 2266.26px; position: relative; cursor: auto;'> </div>
<div id="tempDivforpublishplan1" style='background: url("data:image/png;base64,iVBORw0KGgo…..") 0% 0% / 634px 2266.26px; width: 634px; height: 2266.26px; position: relative; cursor: auto;'> </div>
.
.
.
<div id="tempDivforpublishplan19" style='background: url("data:image/png;base64,iVBORw0KGgo…..") 0% 0% / 634px 2266.26px; width: 634px; height: 2266.26px; position: relative; cursor: auto;'> </div>
When image count is more, or the size and resolution of images is high, only few images are converted properly. Remaining images are either converted partially or not converted at all. Is there any workaround which can be used to fix this issue?
i have achieved this using callback and delay....
before calling your recursive function use delay and use callback as html2canvas is asynchronous call
I think you are having this trouble because you reach CanvasRenderer height limit during rendering. Assuming all your divs your page height is more than 40000px. Html2Canvas renders your page completely and then crops your div from it according to your div's position. You can see how big your canvas object is if you take a look throw your console having 'logging: true' in html2canvas options. Here is some more info about this subject: Maximum size of a <canvas> element
Not sure how to explain this, but here goes:
Instead of Fancybox opening a 'box' on the page which can have a scroll bar inside it to view overflow content, I want the content to just sit on top of the current / parent content.
So, at the moment, if the browser inner width was 800px and you were opening content that needed 1200px height, then the Fancybox 'box' height can be set at 800px and a scrollbar is used to scroll the content of the new 'box' (as the content is 1200px). I want to do it so there is no new scrollbar, but the new content is the full 1200px which pushes the main/parent page down (forcing a scroll bar on the parent if none already existed).
Clicking the close button would still close it.
Is this possible? Do I make sense?
This is for FancyBox 2.
So for this html
<a class="fancybox" href="{target content}">open content at 1200px height</a>
use this script
$(".fancybox").fancybox({
type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
width: 800, // or whatever
height: 1200,
autoSize : false, // so the size will be 800x1200
autoCenter: false, // so fancybox will scroll down if needed
fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
scrolling : "no" // so no scroll bars inside fancybox
});
NOTES: You cannot set specific dimensions to images, they will be either full size (when fitToView is set to false) or scaled to the viewport (when fitToView is set to true); the other types of content can be adjusted to the dimensions of width and height as in the code above.
TIP : you may open different type of content (or target different contents) with different heights each and change the height of fancybox dynamically using the HTML5 data-* attribute .... so for this html:
<a class="fancybox" href="{target content 01}" data-height="1200">open content 01 at 1200px height</a>
<a class="fancybox" href="{target content 02}" data-height="1000">open content 02 at 1000px height</a>
<a class="fancybox" href="{target content 03}" data-height="1450">open content 03 at 1450px height</a>
then add the callback beforeShow to your script to get the value of data-height like this
$(".fancybox").fancybox({
type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
width: 800, // or whatever
// height: 1200, // no fixed height but obtained dynamically
autoSize : false, // so the size will be 800x1200
autoCenter: false, // so fancybox will scroll down if needed
fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
scrolling : "no", // so no scroll bars inside fancybox
beforeShow : function(){
this.height = $(this.element).data("height");
}
});