This plugin allows you to take "screenshots/captures" of pages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
Works best in modern browsers For more informations visit html2canvas
1.9 - performance improvements when saving image / added wait spinner to visualize progress / fixed error when opening image in new tab in IE
1.8 - added APEX events to plugin, so you can react with other DA on this (for saved to DB & error saving to DB)/ cleaned up js code with own namespace
1.6 - performance improvements(removed redundant AJAX call) / split the clob into a 30k param array (OHS 32k limit for params)
1.5 - removed the save to item functionality / instead added a AJAX function which saves the resulting image to Database using custom PL/SQL code
1.4 - Added options to pick a border color of your choice / fill the selector´s content with light transparent color (based on border color)
1.3 - Added options to choose a filter of graphical DOM selector / Hide label of graphical DOM selector
1.2 - Added possibility to capture part of screen with a graphical DOM selector (Choose DIV with your mouse cursor)
- Import plugin file "dynamic_action_plugin_de_danielh_apexscreencapture.sql" from source directory into your application
- (Optional) Deploy the JS files from "server" directory on your webserver and change the "File Prefix" to webservers folder.
The plugin settings are highly customizable and you can change:
- DOM UI Selector - Choose if a graphical selector should be used or not.
- DOM Filter - A selector that an element should match in order to be outlined and clicked. Default is 'div'. No value means no filter is enabled and all elements would be outlined.
- Hide Label - Shows/Hides a label above the visual indicator. The label contains the element's name, id, class name, and dimensions.
- Selector Border Color - Color of the DOM selector outline
- Selector Fill Content - Whether the content of a selected area is filled with color or not. (30% darker than selector´s border color)
- JQuery Selector - Enter the JQuery Selector that should be captured
- Open image in new tab (or save to DB) - Choose whether the image should be opened in a new window or saved to DB using custom PL/SQL (for BLOBs)
- PLSQL Code - PLSQL code which saves the image to database tables or collections
- Background color - Canvas background color, if none is specified in DOM. Set undefined for transparent
- Width - Width in pixels (default screen width)
- Height - Height in pixels (default screen height)
- Output-Type - Output-Type of the resulting screenshot image (e.g. PNG, JPEG, PDF)
- Letter rendering - Whether to render each letter separately
- Allow taint - Whether to allow cross-origin images to taint the canvas
- Logging - Whether to log events in the console
- Screen Capture - Saved to DB - DA event that fires when the image is successfully saved to DB
- Screen Capture - Error saving to DB - DA event that fires when saving to DB had an error
- Create for example a new Dynamic Action with event "on button click"
- As action choose "APEX Screen Capture".
- Choose best fitting plugin attributes (help included)
For saving the screenshot (base64 png) to DB you can use a PL/SQL function like this:
DECLARE
--
l_collection_name VARCHAR2(100);
l_blob BLOB;
l_filename VARCHAR2(100);
l_mime_type VARCHAR2(100);
l_token VARCHAR2(32000);
--
BEGIN
-- get defaults
l_mime_type := nvl(apex_application.g_x01,
'image/png');
l_filename := 'screenshot_' || to_char(SYSDATE,
'YYYYMMDDHH24MISS');
-- file name based on mime type
IF l_mime_type = 'image/png' THEN
l_filename := l_filename || '.png';
ELSIF l_mime_type = 'image/jpeg' THEN
l_filename := l_filename || '.jpg';
ELSIF l_mime_type = 'application/pdf' THEN
l_filename := l_filename || '.pdf';
END IF;
-- build CLOB from f01 30k Array
dbms_lob.createtemporary(l_blob,
FALSE,
dbms_lob.session);
FOR i IN 1 .. apex_application.g_f01.count LOOP
l_token := wwv_flow.g_f01(i);
IF length(l_token) > 0 THEN
dbms_lob.append(l_blob,
to_blob(utl_encode.base64_decode(utl_raw.cast_to_raw(l_token))));
END IF;
END LOOP;
--
-- create own collection (here starts custom part (for example a Insert statement))
-- collection name
l_collection_name := 'SCREEN_CAPTURE';
-- check if exist
IF NOT apex_collection.collection_exists(p_collection_name => l_collection_name) THEN
apex_collection.create_collection(l_collection_name);
END IF;
-- add collection member (only if BLOB not null)
IF dbms_lob.getlength(lob_loc => l_blob) IS NOT NULL THEN
apex_collection.add_member(p_collection_name => l_collection_name,
p_c001 => l_filename, -- filename
p_c002 => l_mime_type, -- mime_type
p_d001 => SYSDATE, -- date created
p_blob001 => l_blob); -- BLOB img content
END IF;
--
END;
If you would like to exclude some areas from getting rendered to the resulting image, just add
data-html2canvas-ignore="true"
to a element or a region or something else. If you would like to exclude a complete region add the "data-html2canvas-ignore" attribute to the "Custom Attributes" field of a region in APEX Page Designer.
