Download Piktochart projects as PNGs as many times as you want at any resolution you want. Doesn't get around CORs yet, so some elements may be missing.
// ==UserScript==
// @name Piktochart Downloader
// @namespace https://github.com/Enchoseon/enchos-assorted-userscripts/raw/main/piktochart-downloader.user.js
// @version 1.0.2
// @description Download Piktochart projects as PNGs as many times as you want at any resolution you want. Doesn't get around CORs yet, so some elements may be missing.
// @author Enchoseon
// @include *create.piktochart.com*
// @run-at document-start
// @grant none
// @require https://unpkg.com/html2canvas@1.3.2/dist/html2canvas.min.js
// ==/UserScript==
(function() {
"use strict";
// ======
// Config
// ======
const config = {
scale: 4,
}
// ========================================
// Replace Download Button With Html2Canvas
// ========================================
window.addEventListener("click", function (event) {
if (event.target.id === "editor-download" || event.target.innerHTML === "Download") {
event.stopPropagation();
enableCSS();
html2canvas(document.getElementsByClassName("pikto-canvas")[0], {scale: 4}).then(function(canvas) {
var link = document.createElement("a");
link.download = "piktochart.png";
link.href = canvas.toDataURL()
link.click();
disableCSS();
});
}
}, true);
// ==========
// CSS Tweaks
// ==========
var toggleCSSTag;
function enableCSS() {
const css = `
.pikto-block-height-handle {
display: none;
}
`;
console.log("Enabling CSS Tweaks");
var s = document.createElement("style");
s.setAttribute("type", "text/css");
s.appendChild(document.createTextNode(css));
toggleCSSTag = document.getElementsByTagName("head")[0].appendChild(s);
}
function disableCSS() {
console.log("Disabling CSS Tweaks");
toggleCSSTag.remove();
toggleCSSTag = null;
}
})();