The plugin adds the "Save as Image" button to your WordPress web site. The button allows to save a web page as an image or send it by email in one click.
The plugin runs in a demo mode by default, you do not need to register to try it out. The demo mode is fully functional, it just adds a watermark to the output image.
If you want to remove the watermark, you can purchase our API license and set your Pdfcrowd username and API key in the plugin settings.
A single API license can be used for both our WordPress plugins on multiple web sites. The API license also allows to use our Conversion API directly.
To get a quick idea of what the plugin output will look like, enter a web page or upload an HTML file using the form below. It will generate several plugin output previews with different settings. You can then choose the best one and configure the plugin using the respective settings.
You can also interactively explore all plugin settings in our API Playground.
There are three ways to add the button to your web site.
The button is added to your pages automatically after the plugin is installed. On the Button Look section in the plugin settings, you can can select the pages to which you want to add the button.
You can add the button with a plain or block shortcode.
[save_as_image_pdfcrowd]
- Saves the entire web page as Image.
[block_save_as_image_pdfcrowd]
- Saves just the enclosed code block as Image.
To style the block, include CSS rules inside the shortcode.
The examples below show how to use the shortcodes and override the defaults set in the plugin settings.
<h3>Save the print version of the page</h3> The button is put in the middle [save_as_image_pdfcrowd \ use_print_media=1 \ output_format='png' \ output_name='inline.png' \ button_text='Save printable version to PNG'] of this sentence. <h3>Save the screen version of the page</h3> [save_as_image_pdfcrowd \ use_print_media=0 \ output_name='browser.png' \ button_text='Save browser page to PNG' ] <h3>Save only a code block</h3> [block_save_as_image_pdfcrowd \ output_name='just_div.png' \ button_text='Save just a part of the page' \ screenshot_width='800' \ button_background_color='green' \ button_alignment='left'] <style> .invoice { font-size: 150%; } </style> <div class="invoice"> Save this div and its descendants only. </div> [/block_save_as_image_pdfcrowd] <h3>Convert any web page</h3> [save_as_image_pdfcrowd \ url='https://wikipedia.org' \ output_name='wikipedia.png' \ button_text='Save Wikipedia as PNG']
The conversion button can be added directly from your PHP code with this helper function:
create_save_as_image_pdfcrowd_button($options = array())
The $options argument is an array containing settings which override the defaults set in the plugin settings. An example:
echo create_save_as_image_pdfcrowd_button(array( 'screenshot_width' => '800', 'button_text' => 'Save as Image' ));
The plugin offers a PHP function that runs the conversion synchronously. This may be useful if your want to initiate a conversion based on an event other than a plugin button click.
pdfcrowd_save_as_image($options = array())
The $options argument is an array containing conversion settings independent of the settings set on the plugin settings page. It must contain at least your Pdfcrowd username and the API key. An example:
<?php $output = pdfcrowd_save_as_image(array( 'username' => '', 'api_key' => '', 'output_format' => 'png', 'screenshot_width' => '800', 'url' => 'https://www.example.com/' )); if(!is_wp_error($output)) { echo $output; } ?>
The table below lists the most common customizations.
Image size | Set image dimensions with Screenshot Width option and Screenshot Height option. |
Image format | Specify a different output image format with Output Format option. |
Hide or remove elements |
You can use the following classes in your HTML
code to hide or remove elements from the output:
|
Use @media print | You can switch to the print version of the page (if it exists) with Use Print Media option. |
Run custom JavaScript | You can use On Load Javascript option or Custom Javascript option to alter the HTML contents with a custom JavaScript. In addition to the standard browser APIs, the custom JavaScript code can use helper functions from our JavaScript library . |
Custom CSS styling |
You can alter CSS styling used during conversion
with a custom JavaScript or using the
pdfcrowd-body
CSS class, which is automatically set on the HTML
<body> element. You can, for example, set
the H1 height to 48px by adding the following line
to your CSS:
.pdfcrowd-body h1 { font-size: 48px; }
|
libPdfcrowd.highlightHtmlElements
method call to visualize all HTML elements. See the
backgrounds example
,
borders example
and helper
JavaScript library
documentation.
Refer to the Save as Image WordPress Plugin Reference for a description of all options.