backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-22 03:51:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

use map canvas size to save as PNG/JPG image

Browse source
This commit is contained in:
ntchung 2020-03-13 23:58:02 +07:00
parent 7c74c3d29f
commit d6ee8f55ec
2 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
modules/save-and-load.js
View file

@ -23,8 +23,9 @@ async function savePNG() {
const link = document.createElement("a"); const link = document.createElement("a");
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
canvas.width = svgWidth * pngResolutionInput.value;
canvas.height = svgHeight * pngResolutionInput.value; canvas.width = mapWidthInput.value * pngResolutionInput.value;
canvas.height = mapHeightInput.value * pngResolutionInput.value;
const img = new Image(); const img = new Image();
img.src = url; img.src = url;
@ -52,8 +53,8 @@ async function saveJPEG() {
const url = await getMapURL("png"); const url = await getMapURL("png");
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = svgWidth * pngResolutionInput.value; canvas.width = mapWidthInput.value * pngResolutionInput.value;
canvas.height = svgHeight * pngResolutionInput.value; canvas.height = mapHeightInput.value * pngResolutionInput.value;
const img = new Image(); const img = new Image();
img.src = url; img.src = url;
@ -75,10 +76,11 @@ async function saveJPEG() {
// parse map svg to object url // parse map svg to object url
async function getMapURL(type, subtype) { async function getMapURL(type, subtype) {
const cloneEl = document.getElementById("map").cloneNode(true); // clone svg const cloneEl = document.getElementById("map").cloneNode(true); // clone svg
cloneEl.id = "fantasyMap"; cloneEl.id = "fantasyMap";
document.body.appendChild(cloneEl); document.body.appendChild(cloneEl);
const clone = d3.select(cloneEl); const clone = d3.select(cloneEl);
clone.attr("width", mapWidthInput.value).attr("height", mapHeightInput.value);
clone.select("#debug").remove(); clone.select("#debug").remove();
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

19
modules/utils.js
View file

@ -597,4 +597,21 @@ function isCtrlClick(event) {
} }
// localStorageDB // localStorageDB
!function(){function e(t,o){return n?void(n.transaction("s").objectStore("s").get(t).onsuccess=function(e){var t=e.target.result&&e.target.result.v||null;o(t)}):void setTimeout(function(){e(t,o)},100)}var t=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB;if(!t)return void console.error("indexDB not supported");var n,o={k:"",v:""},r=t.open("d2",1);r.onsuccess=function(e){n=this.result},r.onerror=function(e){console.error("indexedDB request error"),console.log(e)},r.onupgradeneeded=function(e){n=null;var t=e.target.result.createObjectStore("s",{keyPath:"k"});t.transaction.oncomplete=function(e){n=e.target.db}},window.ldb={get:e,set:function(e,t){o.k=e,o.v=t,n.transaction("s","readwrite").objectStore("s").put(o)}}}(); !function(){function e(t,o){return n?void(n.transaction("s").objectStore("s").get(t).onsuccess=function(e){var t=e.target.result&&e.target.result.v||null;o(t)}):void setTimeout(function(){e(t,o)},100)}var t=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB;if(!t)return void console.error("indexDB not supported");var n,o={k:"",v:""},r=t.open("d2",1);r.onsuccess=function(e){n=this.result},r.onerror=function(e){console.error("indexedDB request error"),console.log(e)},r.onupgradeneeded=function(e){n=null;var t=e.target.result.createObjectStore("s",{keyPath:"k"});t.transaction.oncomplete=function(e){n=e.target.db}},window.ldb={get:e,set:function(e,t){o.k=e,o.v=t,n.transaction("s","readwrite").objectStore("s").put(o)}}}();
function copyStylesInline(destinationNode, sourceNode) {
var containerElements = ["svg", "g"];
for (var cd = 0; cd < destinationNode.childNodes.length; cd++) {
var child = destinationNode.childNodes[cd];
if (containerElements.indexOf(child.tagName) != -1) {
copyStylesInline(child, sourceNode.childNodes[cd]);
continue;
}
var style = sourceNode.childNodes[cd].style && (sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd]));
if (style == "undefined" || style == null) continue;
for (var st = 0; st < style.length; st++) {
child.style.setProperty(style[st], style.getPropertyValue(style[st]));
}
}
}