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
Related
What I want to achive
I am using gatsby and want to design an image gallery. Clicking on one of the images shall open a modal, which: (1) is showing the image in maximum possible size, so that it still fits into the screen and (2) is centered in the screen.
My Code
/* imagemodal.js */
import React from 'react'
import * as ImagemodalStyles from './imagemodal.module.css'
import { Modal } from 'react-bootstrap'
import Img from 'gatsby-image'
import { useStaticQuery, graphql } from 'gatsby'
export default function Imagemodal() {
const data = useStaticQuery(graphql`
query {
file(relativePath: { eq: "images/mytestimage.jpg" }) {
childImageSharp {
fluid(maxWidth: 1200) {
...GatsbyImageSharpFluid
}
}
}
}
`)
return (
<div>
<Modal
show={true}
centered
className={ImagemodalStyles.imageModal}
dialogClassName={ImagemodalStyles.imageModalDialog}
onHide={(e) => console.log(e)}
>
<Modal.Header closeButton />
<Modal.Body className={ImagemodalStyles.imageModalBody}>
<h1>TestInhalt</h1>
<Img fluid={data.file.childImageSharp.fluid} />
</Modal.Body>
</Modal>
</div>
)
}
/* imagemodal.module.scss */
.imageModalDialog {
display: inline-block;
width: auto;
}
.imageModal {
text-align: center;
}
.imageModalBody img {
max-height: calc(100vh - 225px);
}
The Problem
The image does not scale to the screen size. The image is either too big - so it flows over the vieport - or it is too small. Secondly, the modal size does not respond to the image size correctly and / or is not centered.
What I tried
I used this suggestion for the CSS: How to limit the height of the modal?
I tried as well dozens of other CSS parameter combinations. But I could not find a working solution.
I tried to format the gatsby-image directly with a style-tag.
I tried as well react-modal but had similar problems.
Does anyone have a good solution to show a gatsby-image in full screen size in a responsive modal? For me it is okay to use either the bootstrap-modal or react-modal - or any other suitable solution.
Edit
In the end I ended up with a workaround. I used react-image-lightbox and took the Image-Source from gatsby-image as the input for lightbox. My component gets the data from the graphQL query in the props via props.imageData.
This works quite well for me:
import Lightbox from 'react-image-lightbox';
...
export default function Imagegallery(props) {
...
const allImages = props.imageData.edges
const [indexImageToShow, setIndexImageToShow] = useState()
...
return(
<Lightbox
mainSrc={allImages[indexImageToShow].node.childrenImageSharp[0].fluid.src}
...
/>
Special thanks to #FerranBuireu to point me to the right direction
Assuming that the functionality works as expected, as it seems, it's a matter of CSS rules, not React/Gatsby issue. The following rule:
.imageModalBody img {
max-height: calc(100vh - 225px);
}
It Will never be applied properly, since gatsby-image creates an output of HTML structure of nested <div>, <picture> and <img> so your rule will be affected by the inherited and relativity of the HTML structure. In other words, you are not pointing to the image itself with that rule because of the result HTML structure.
You should point to the <Img>, which indeed, it's a wrapper, not an <img>.
return (
<div>
<Modal show={true} onHide={handleClose} centered className={ImagemodalStyles.imageModal} dialogClassName={ImagemodalStyles.imageModalDialog}>
<Modal.Header closeButton />
<Modal.Body>
<Img className={ImagemodalStyles.imageModalBody} fluid={props.data.file.childImageSharp.fluid} />
</Modal.Body>
</Modal>
</div>
)
The snippet above will add the (spot the difference, without img):
.imageModalBody {
max-height: calc(100vh - 225px);
}
To the wrapper, which may or may not fix the issue, but at least will apply the rule correctly. It's difficult to know what's wrong without a CodeSandbox but you will apply the styles correctly with this workaround.
Keep always in mind that when using gatsby-image, the <img> it's profound in the resultant HTML structure so your styles should apply to the outer wrapper of it.
I have a DeckGL component I'm eclosing it in a div tag and giving it size, but the deckGL layer seems to occupy the entire viewport. here is a snippet of my code.
const INITIAL_VIEW_STATE = {
longitude: 83.32247972488423,
latitude: 17.714023254029464,
zoom: 10,
pitch: 0,
bearing: 0
}
<div class="my-container">
<DeckGL initialViewState={INITIAL_VIEW_STATE} layer={layer} controller>
// here I'm putting a static map
</DeckGL>
</div>
How to render deck gl component in a specific div with a given size.
You need to add a dimension to your deck.gl container, in your example 'my-container'. Add height, width and position. Switch height and width values according to your need, but leave position with value 'relative'. In this way you can size DeckGL component and it can render fully inside your container.
Bonus: it is also responsive.
<div class"my-container" style={{ height: '50vh', width: '50vw', position: 'relative' }}
<DeckGL>
...
</DeckGL>
</div>
I am using mapbox-gl-js to display a map inside of a responsive container.
Regardless of the size of the responsive container, I want the map to maintain the same resolution such that resizing the window does not affect the bounds or zoom level of the map, it simply scales the map as if it were a static image.
I achieve this by dynamically calculating the scale factor and applying it to the container via CSS transform:
#map {
width: 100%;
height: 100%;
}
#map-scaler {
width: 1280px;
height: 1280px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: 0 0;
}
#map-container {
background-color: #fff;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
height: 100%;
}
<div id="map-container">
<div id="map-scaler">
<div id="map"></div>
</div>
</div>
// Get size of map container for display
var mapContainer = $("#map-container");
var mcWidth = mapContainer.width();
var mcHeight = mapContainer.height();
// Get size of scaler container
var scaleContainer = $("#map-scaler");
var sWidth = scaleContainer.width();
var sHeight = scaleContainer.height();
var scaleWidth = mcWidth / sWidth;
var scaleHeight = mcHeight / sHeight;
$("#map-scaler").css("transform", "scale(" + scaleWidth + ", " + scaleHeight + ")");
This achieves the desired results visually. For example, I can have a 1280x1280 map displayed inside of a 500x500 container.
The problem is that all the mouse events are now "off". For example, if you attempt a map click or a scroll zoom, the map applies your mouse event to the wrong area of the map.
How can I compensate for my CSS transform so that mouse events accurately reflect where the user clicked?
Can you try the resize method? As mentionned in the doc, the method looks at your div width&height and resize your map. Event should be updated too.
https://www.mapbox.com/mapbox-gl-js/api/#Map#resize
I am trying to implement the app that have 4 pages in 4 table. It supposed to be support swipe gesture, and each page contains dynamic data and make the pages have different height.
I tried to use responsive-slider-div-span.source example and integrate the 4 table into the slides.
I would like to set the width and height for the slides dynamically while the document ready, However, The slide will not show if the width and height is not pre set in the the slide div.
May I know any suggestion?
Typically, the size of jssor slider is defined in html code, and you can alter the size grammatically.
Given a slider at size 600x300, you can use javascript to change size before initialization of jssor slider.
<script>
jQuery(document).ready(function ($) {
var options = {};
//retrieve height of the slider, assuming the height should be 200px;
$("#slider1_container").height("200px");
$("#slider1_slides").height("200px");
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//According to your comment, please add following code
//Handle $EVT_PARK event BEGIN
function OnSliderPark(slideIndex, fromIndex) {
if (slideIndex == 0 || slideIndex == jssor_slider1.$SlidesCount() - 1) {
//do something scroll page to top
}
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnSliderPark);
//Handle $EVT_PARK event END
});
</script>
<div id="slider1_container" style="... width: 600px; height: 300px; ...">
<div u="slides" id="slider1_slides" style="... width: 600px; height: 300px; ...">
...
</div>
</div>
I use the plugin jbimages, everything goes ok but I need to set a defined width for image, width = 600px. Exists a solution?Help me please.Thnx
you can set the width in your css on the pages you upload them? for example if the images are all in a div wrapper , use
.wrapper img {
width: 600px;
height: auto;
}