mirror of
https://github.com/google/blockly.git
synced 2026-01-24 09:10:09 +01:00
90b3f75d82
Our files are up to a decade old, and have churned so much, that the initial author of the file no longer has much meaning. Furthermore, this will encourage developers to post to the developer group, rather than emailing Googlers (usually me) directly.
108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
/**
|
|
* @license
|
|
* Copyright 2019 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* @fileoverview Download screenshot.
|
|
*/
|
|
'use strict';
|
|
|
|
/**
|
|
* Convert an SVG datauri into a PNG datauri.
|
|
* @param {string} data SVG datauri.
|
|
* @param {number} width Image width.
|
|
* @param {number} height Image height.
|
|
* @param {!Function} callback Callback.
|
|
*/
|
|
function svgToPng_(data, width, height, callback) {
|
|
var canvas = document.createElement("canvas");
|
|
var context = canvas.getContext("2d");
|
|
var img = new Image();
|
|
|
|
var pixelDensity = 10;
|
|
canvas.width = width * pixelDensity;
|
|
canvas.height = height * pixelDensity;
|
|
img.onload = function() {
|
|
context.drawImage(
|
|
img, 0, 0, width, height, 0, 0, canvas.width, canvas.height);
|
|
try {
|
|
var dataUri = canvas.toDataURL('image/png');
|
|
callback(dataUri);
|
|
} catch (err) {
|
|
console.warn('Error converting the workspace svg to a png');
|
|
callback('');
|
|
}
|
|
};
|
|
img.src = data;
|
|
}
|
|
|
|
/**
|
|
* Create an SVG of the blocks on the workspace.
|
|
* @param {!Blockly.WorkspaceSvg} workspace The workspace.
|
|
* @param {!Function} callback Callback.
|
|
* @param {string=} customCss Custom CSS to append to the SVG.
|
|
*/
|
|
function workspaceToSvg_(workspace, callback, customCss) {
|
|
|
|
// Go through all text areas and set their value.
|
|
var textAreas = document.getElementsByTagName("textarea");
|
|
for (var i = 0; i < textAreas.length; i++) {
|
|
textAreas[i].innerHTML = textAreas[i].value;
|
|
}
|
|
|
|
var bBox = workspace.getBlocksBoundingBox();
|
|
var x = bBox.x || bBox.left;
|
|
var y = bBox.y || bBox.top;
|
|
var width = bBox.width || bBox.right - x;
|
|
var height = bBox.height || bBox.bottom - y;
|
|
|
|
var blockCanvas = workspace.getCanvas();
|
|
var clone = blockCanvas.cloneNode(true);
|
|
clone.removeAttribute('transform');
|
|
|
|
var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
|
|
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
|
svg.appendChild(clone);
|
|
svg.setAttribute('viewBox',
|
|
x + ' ' + y + ' ' + width + ' ' + height);
|
|
|
|
svg.setAttribute('class', 'blocklySvg ' +
|
|
(workspace.options.renderer || 'geras') + '-renderer ' +
|
|
(workspace.getTheme ? workspace.getTheme().name + '-theme' : ''));
|
|
svg.setAttribute('width', width);
|
|
svg.setAttribute('height', height);
|
|
svg.setAttribute("style", 'background-color: transparent');
|
|
|
|
var css = [].slice.call(document.head.querySelectorAll('style'))
|
|
.filter(function(el) { return /\.blocklySvg/.test(el.innerText) ||
|
|
(el.id.indexOf('blockly-') === 0); }).map(function(el) {
|
|
return el.innerText; }).join('\n');
|
|
var style = document.createElement('style');
|
|
style.innerHTML = css + '\n' + customCss;
|
|
svg.insertBefore(style, svg.firstChild);
|
|
|
|
var svgAsXML = (new XMLSerializer).serializeToString(svg);
|
|
svgAsXML = svgAsXML.replace(/ /g, ' ');
|
|
var data = 'data:image/svg+xml,' + encodeURIComponent(svgAsXML);
|
|
|
|
svgToPng_(data, width, height, callback);
|
|
}
|
|
|
|
/**
|
|
* Download a screenshot of the blocks on a Blockly workspace.
|
|
* @param {!Blockly.WorkspaceSvg} workspace The Blockly workspace.
|
|
*/
|
|
Blockly.downloadScreenshot = function(workspace) {
|
|
workspaceToSvg_(workspace, function(datauri) {
|
|
var a = document.createElement('a');
|
|
a.download = 'screenshot.png';
|
|
a.target = '_self';
|
|
a.href = datauri;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.parentNode.removeChild(a);
|
|
});
|
|
};
|