My company USES the html2canvas screenshot framework, but it does not support SVG format and is not friendly to the new CSS properties, such as transform, and the shape of the ellipse can sometimes be inconsistent with the original image.
There is no new open source framework to support these requirements. There is no framework to replace the html2canvas framework with the functionality of the screenshot.
My English is not good, I use the translation, thank you
i have the same problem, but here's the think you should consider:
html2canvas is only support this CSS Property.
the developers themselves say "It's not suitable for production".
But if you still want to use it, you can try to make work around by changing the CSS before render and change it back after render.
Also for the SVG issue, you can use plugin canvg, replace the svg with the canvas that canvg provide before render.
But it's still unstable, the image sometime is off the image.
i suggest to use server side capture with phantomjs, here's the example for that:
var page = require('webpage').create();
page.open('http://github.com/', function() {
page.render('github.png');
phantom.exit();
});
it's quite fast i would say.
Hope it could help.
Related
I am writing documentation in Markdown which I will need to convert into a PDF. However, when converting to a PDF using this Visual Studio Code plugin it adds pages and occasionally the pages will break at awkward moments.
Is there a way to view how these pages will break before converting to a PDF?
I don't see anything about previewing breaks in the docs, but you can manually insert page breaks:
Please use the following to insert a page break.
<div class="page"/>
Breaking before headings, for example, might be a good way to partly mitigate this issue.
There is also an alternative. You can use this css style directly as well:
<div style="page-break-before: always;" />
What can be useful, to fit more stuff in one page, is to change the font and figure scale by changing the scale in settings:
"markdown-pdf.scale": 1
I have an SVG asset of a map, in which I have to change the color of some cities depending on the results of a network call. On the web, one normally would add a class to each path, give it some CSS, and toggle that class using JavaScript.
How can I achieve the same effect in flutter?
This can be done with the new version of jovial_svg. It supports embedded stylesheets, so you can use CSS exactly as suggested. Of course, you'd need to re-parse the SVG whenever there's a change, but that's not a big deal here.
Alternately, if it's just one set of cities, you could use SVG's currentColor, and set that value in the appropriate ScalableImage factory. But for your use case, CSS seems like the better way to go.
NOTE: At this exact moment, CSS support is in pre-release, but it should be formally released as 1.1.4 within a couple of days. In the meantime, see https://pub.dev/packages/jovial_svg/versions/1.1.4-rc.3
I'm trying to export the Ui control sap.ui.commons.networkgraph.Graph as PDF.
I follow this guide to rendering an org.chart
https://sapui5.netweaver.ondemand.com/sdk/#/sample/sap.suite.ui.commons.sample.NetworkGraphOrgChart/preview
I've tried jspdf to render but what I've got looks like this
I've also tried html2pdf as this link: https://github.com/eKoopmans/html2pdf.js to render but what I've got looks like this
AFAIK, these tools use svg string to render PDF. But the svg string I tried to retrieved from network graph is not enough. It miss the svg lines.
In the other hand, sapui5's Vizframe do very well exporting to PDF, thanks to the provided ExportToSVGString method.
Any suggestions please ?
In the worst case, I would have to write a function to render these graphic to svg (like the method exportToSVGString).
There's a module to do this in Drupal land, but I've been frustrated with the hacks that've been necessary in Wygwam. What is the best way to go about implementing this in such a way that you don't need to totally override the default image handling in ChannelImages/Wygwam?
Assets is a good suggestion, but I believe Devdemon's channel images might be a better fit for the workflow you're suggesting.
http://www.devdemon.com/channel_images/
Clients can add (and see) a caption and more and it's fully integrated with Wygwam and other editors. Devdemon's support is also excellent.
The Assets module from Pixel & Tonic allows you to double-click on the image (or any other file) and add metadata. You then have access to the metadata in your templates.
Check the screenshot: http://pixelandtonic.com/assets
You can also add metadata using the native File Manager. Click the edit icon from the File Manager and you'll see a few fields. You can use the File Entries tag to access it.
http://expressionengine.com/user_guide/modules/file/file_tag.html
I typically use Matrix with one column for the image, one column for the caption, and if a link is needed another column for the link. This of course works best if the image is in a fixed location within your template.
On possible way to accomplish this that I have used is to run some jQuery that looks for images within a certain area, and if they have alt attributes, rewrite the image tag within a tag with a tag inside.
so:
jQuery(document).ready(function() {
$('#page-content > .wrapper img').each(function(){
if($(this).attr('alt') !== undefined && $(this).attr('alt').length > 0){
if(!$(this).parent().hasClass('content-image')){
$(this).replaceWith("<figure class='content-image "+$(this).attr('class')+"'>"+$($('<div></div>').html($(this).clone().attr('class',''))).html()+"<figcaption>"+$(this).attr('alt')+"</figcaption></figure>");
}
}
});
});
will do just that. It's looking within a #page-content div for img tags with alt attributes. And then rewriting it as
<figure><img src='....' .... /><figcaption>This is the text that was in the alt attribute</figcaption></figure>
Soooo, that kinda works. The only caveat is that you had better not use any double-quotes within your alt text, or it will break thangs. Not the cleanest of solutions, but a solution, nonetheless.
I'm trying to use the printing stuff in iOS 4.2 to print from my iPhone app, but I'm having real trouble getting multi-page content to display nicely. As you can see in the attached screenshots of PDFs generated through the iOS printing API, UIMarkupTextPrintFormatter really likes to use a painfully small top-margin when rendering.
Additionally, it doesn't seem to try to split block-elements too nicely either ... it's tough to see in the screenshot but the page break actually occurs halfway through a table row, rather than on a border between rows.
I've tried using the CSS #page directives to specify page boundaries, however iOS Webkit doesn't seem to support these at all.
Does anyone know of any techniques, either in HTML or through the iOS SDK to make these top-margins bigger?
I really don't want to write a custom UIPrintPageRenderer class because I'm trying to give my users the ability to customize their printouts through HTML templates ... going with a custom renderer would almost certainly make this impossible (or really difficult).
Any help is much appreciated!
You're on the right track with UIPrintPageRenderer, but fortunately you don't need to write a custom subclass to do this. All you need to do is instantiate a vanilla UIPrintPageRenderer, set the headerHeight and footerHeight properties, and add your HTML formatter to the renderer using addPrintFormatter:startingAtPage:. It only takes a few extra lines of code, I have posted my method here: Print paper size and content inset