mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-23 08:12:38 +02:00
feat: preview screenshot capture. fixes #23
This commit is contained in:
Kushagra Gour
@ -105,12 +105,18 @@
|
||||
<symbol id="codepen-logo" viewBox="0 0 120 120"><path class="outer-ring" d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"/><path class="inner-box" d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"/></symbol>
|
||||
</svg>
|
||||
|
||||
<a href="" id="codepenBtn" class="mode-btn hint--rounded hint--top-left" data-hint="Edit on CodePen">
|
||||
<a href="" id="codepenBtn" class="mode-btn hint--rounded hint--top-left" aria-label="Edit on CodePen">
|
||||
<svg>
|
||||
<use xlink:href="#codepen-logo"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="" id="screenshotBtn" class="mode-btn hint--rounded hint--top-left" d-click="takeScreenshot" aria-label="Take screenshot of preview">
|
||||
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
|
||||
<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div class="footer__separator"></div>
|
||||
|
||||
<a id="layoutBtn1" class="mode-btn">
|
||||
|
||||
@ -6,7 +6,9 @@
|
||||
"homepage_url": "https://kushagragour.in/lab/web-maker",
|
||||
"permissions": [
|
||||
"storage",
|
||||
"tabs"
|
||||
"tabs",
|
||||
"<all_urls>",
|
||||
"downloads"
|
||||
],
|
||||
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
|
||||
"options_ui": {
|
||||
|
||||
@ -822,6 +822,94 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
|
||||
trackEvent('ui', 'onboardDontShowInTabClick');
|
||||
}
|
||||
|
||||
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(), 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(function(fileWriter) {
|
||||
fileWriter.onwriteend = onWriteEnd;
|
||||
fileWriter.write(blob);
|
||||
}, errorHandler);
|
||||
}, errorHandler);
|
||||
}, errorHandler);
|
||||
}
|
||||
|
||||
scope.takeScreenshot = function (e) {
|
||||
// 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);
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
chrome.tabs.captureVisibleTab(
|
||||
null, { format: 'png', quality: 100 }, function(dataURI) {
|
||||
s.remove();
|
||||
if (dataURI) {
|
||||
var image = new Image();
|
||||
function onImgLoad() {
|
||||
var c = document.createElement('canvas');
|
||||
var iframeBounds = frame.getBoundingClientRect();
|
||||
c.width = iframeBounds.width;
|
||||
c.height = iframeBounds.height;
|
||||
utils.log(c, iframeBounds)
|
||||
ctx = c.getContext('2d');
|
||||
ctx.drawImage(image,
|
||||
iframeBounds.left, iframeBounds.top, iframeBounds.width, iframeBounds.height,
|
||||
0, 0, iframeBounds.width, iframeBounds.height);
|
||||
image.removeEventListener('load', onImgLoad);
|
||||
saveScreenshot(c.toDataURL());
|
||||
};
|
||||
image.src = dataURI;
|
||||
image.addEventListener('load', onImgLoad);
|
||||
}
|
||||
});
|
||||
}, 50);
|
||||
|
||||
trackEvent('ui', 'takeScreenshotBtnClick');
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function compileNodes() {
|
||||
var nodes = [].slice.call($all('[d-click]'));
|
||||
nodes.forEach(function (el) {
|
||||
|
||||
Reference in New Issue
Block a user