php-web-maker/src/takeScreenshot.js

import { handleDownloadsPermission } from './utils';
import { trackEvent } from './analytics';

function saveScreenshot(dataURI) {
	// convert base64 to raw binary data held in a string
	// doesn't handle URLEncoded DataURIs
	var byteString = atob(dataURI.split(',')[1]);

	// separate out the mime component
	var mimeString = dataURI
		.split(',')[0]
		.split(':')[1]
		.split(';')[0];

	// write the bytes of the string to an ArrayBuffer
	var ab = new ArrayBuffer(byteString.length);
	var ia = new Uint8Array(ab);
	for (var i = 0; i < byteString.length; i++) {
		ia[i] = byteString.charCodeAt(i);
	}

	// create a blob for writing to a file
	var blob = new Blob([ab], {
		type: mimeString
	});
	var size = blob.size + 1024 / 2;

	var d = new Date();
	var fileName = [
		'web-maker-screenshot',
		d.getFullYear(),
		d.getMonth() + 1,
		d.getDate(),
		d.getHours(),
		d.getMinutes(),
		d.getSeconds()
	].join('-');
	fileName += '.png';

	function onWriteEnd() {
		var filePath =
			'filesystem:chrome-extension://' +
			chrome.i18n.getMessage('@@extension_id') +
			'/temporary/' +
			fileName;

		chrome.downloads.download(
			{
				url: filePath
			},
			function() {
				// If there was an error, just open the screenshot in a tab.
				// This happens in incognito mode where extension cannot access filesystem.
				if (chrome.runtime.lastError) {
					window.open(filePath);
				}
			}
		);
	}

	function errorHandler(e) {
		utils.log(e);
	}

	// create a blob for writing to a file
	window.webkitRequestFileSystem(
		window.TEMPORARY,
		size,
		fs => {
			fs.root.getFile(
				fileName,
				{
					create: true
				},
				fileEntry => {
					fileEntry.createWriter(fileWriter => {
						fileWriter.onwriteend = onWriteEnd;
						fileWriter.write(blob);
					}, errorHandler);
				},
				errorHandler
			);
		},
		errorHandler
	);
}

export function takeScreenshot(boundRect) {
	handleDownloadsPermission().then(() => {
		// Hide tooltips so that they don't show in the screenshot
		var s = document.createElement('style');
		s.textContent =
			'[class*="hint"]:after, [class*="hint"]:before { display: none!important; }';
		document.body.appendChild(s);
		import { trackEvent } from './analytics';

		function onImgLoad(image) {
			var c = document.createElement('canvas');
			var iframeBounds = boundRect;
			c.width = iframeBounds.width;
			c.height = iframeBounds.height;
			var ctx = c.getContext('2d');
			var devicePixelRatio = window.devicePixelRatio || 1;

			ctx.drawImage(
				image,
				iframeBounds.left * devicePixelRatio,
				iframeBounds.top * devicePixelRatio,
				iframeBounds.width * devicePixelRatio,
				iframeBounds.height * devicePixelRatio,
				0,
				0,
				iframeBounds.width,
				iframeBounds.height
			);
			image.removeEventListener('load', onImgLoad);
			saveScreenshot(c.toDataURL());
		}

		setTimeout(() => {
			chrome.tabs.captureVisibleTab(
				null,
				{
					format: 'png',
					quality: 100
				},
				function(dataURI) {
					s.remove();
					if (dataURI) {
						var image = new Image();
						image.src = dataURI;
						image.addEventListener('load', () => onImgLoad(image, dataURI));
					}
				}
			);
		}, 50);

		trackEvent('ui', 'takeScreenshotBtnClick');
	});
}