Looking for a way to convert HTML into an image within an Ionic 4 application. I attempted to use html2canvas, however, it was unsuccessful and displayed the following message in the console:
https://i.sstatic.net/4b4Sm.png
Below is the code snippet I used:
var element = document.getElementById('capture');
html2canvas(element).then(canvas => {
var imgData = canvas.toDataURL("image/png");
this.socialSharing.share(null, null, imgData);
});
Experiencing the same issue here. One workaround I found is to move my code outside of the <ion-content> tag. It seems that html2canvas might have trouble rendering shadow DOM elements, such as those within <ion-content> in Ionic 4.
As an example, when placed inside <ion-content>, the canvas appears empty:
<ion-content>
<div id="capture">
<h1>Test</h1>
</div>
</ion-content>
However, moving the code outside of <ion-content> like so:
<div id="capture">
<h1>Test</h1>
</div>
This isn't a perfect fix, but it serves its purpose for now...
I attempted to implement this component as well, but encountered issues with its functionality. My workaround involved utilizing the dom-to-image library. Below is an example of how I managed to achieve the desired outcome. Simply specify the file extension for conversion.
https://www.npmjs.com/package/jspdf
https://www.npmjs.com/package/dom-to-image
import * as jsPDF from 'jspdf';
import domtoimage from 'dom-to-image';
exportPdf(){
const div = document.getElementById('pdf');
const options = { background: 'white', height: 845, width: 595 };
domtoimage.toPng(div, options).then((dataUrl) => {
//Initialize JSPDF
const doc = new jsPDF('p', 'mm', 'a4');
//Add image Url to PDF
doc.addImage(dataUrl, 'PNG', 0, 0, 210, 340);
doc.save('pdfDocument.pdf');
}
}
With the most recent version of html2canvas, shadow dom is now supported, check it out: https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
I've been trying to figure out how to clear the input fields once the form is submitted, but for some reason, the input data remains there even after each submission. I'm using ajax jquery form. Any ideas on how to resolve this issue? Thank you ...
Currently, I have a Single Page Application that is hosted on Microsoft Azure. This application requires refreshing some dashboard data every 5 seconds. To achieve this, I have developed a nodejs service that continuously requests data from the API and gen ...
Currently, I am utilizing TinyNav on my website and it is working wonderfully. However, due to our extensive menu system, the tinynav dropdown appears quite large. I have been attempting to figure out a way to hide all sub-menus without success. I experim ...
In developing a react application with redux, I have chosen to avoid using react-redux by manually handling all dispatched events. Below is a sample code snippet. The content of index.html <!DOCTYPE html> <html> <head> <script src=& ...
Is there a way to capture all RadComboBoxes change events in JQUERY for ASP.NET? $("input[type='text']").Change(function() { alert('changed'); }); In this example, I am specifying the input type as "text" because RadComboBoxes hav ...
Currently facing a challenge while trying to animate a number from 0 to 36.6. The issue is that the end value gets rounded up to 37 instead of displaying as 36.6, which you can observe in this fiddle: http://jsfiddle.net/neal_fletcher/0f3hxej8/ Required ...
Here's a simple issue that I'm facing. I am using React Highcharts Official and I want to import graphOptions from another file for the options attribute on ReactHighcharts. <ReactHighcharts highcharts={Highcharts} options={graphOptions} /> ...
I'm attempting to achieve this: IMG Below is the code snippet I've been using: <div class="container" id="containervideo"> <div id="video"> <div class="box iframe-box"> <div class="container"> ...
Is there a way to configure my basic Node.js server to use simple paths instead of query strings for user session IDs? For instance, can I make domain.com/GH34DG2 function the same as domain.com within my web app? This format seems more visually appealing ...
Although similar questions have been raised in the past, none has successfully addressed this particular issue; they only provide partial solutions. The objective is as follows: We possess a collection of videos referred to as video1, video2, video3, vid ...
I am attempting to concatenate and display 4 items in a dropdown list using AJAX. For example, the value in the dropdown list should appear as (127, CoilWt, 1, KGS) from the database. In the database, I am selecting select CODE_VALUE, CODE_DESC, CODE_SUB ...
Within the render method of a class, an Autocomplete component is causing nothing to appear as rendered; once removed, everything else renders as expected. export default class Home extends Component { render() { return ( ... ...
As I develop a UI application utilizing JQuery UI components, I encounter an issue with aligning radio buttons within the interface. While using JQuery buttonset in isolation functions correctly, integrating it with other UI elements causes misalignment: ...
<input type="email" class="form-control passname" [(ngModel)]="emailID" name="Passenger Email ID" placeholder="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"/> <div class="shake-tool ...
I attempted to swap a class and came across this helpful example here: javascript: replace classList that is inside a conditional Unfortunately, my attempt at modification (shown below) did not work. The use of classList.replace should change all instanc ...
Seeking assistance in determining the progress value of a video using Selenium. I understand that I need to utilize JavaScript executor, but have been unsuccessful in finding a solution so far. The element in question is: <div aria-label="scrub bar" a ...
In my development process, I am working on a basic plugin using the Wordpress Plugin Boilerplate. I have implemented AJAX to create an action triggered by a button press to remove an item from a custom database table I have set up. The AJAX function, butto ...
I have the following code for an SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="470px" height="260px" version="1.1" onload="addEvent ...
Our node environment requires that our JavaScript files undergo Babel processing. Figuring out how to handle this has been manageable. The challenge lies in the fact that we have a mix of file types including .js, .jsx, .ts, and .tsx, which is not subject ...
I am facing an issue with two frames where I need to copy the content from the first frame (myframe) to the second frame (myframe2) using JavaScript. The challenge is that when I set the "src" attribute for myframe2, it causes a reload of FrameSecond. Is ...