</div>
</div>
+<div class="dialog" id="dialog-save-fail" style="display: none">
+ <h2>Save</h2>
+ <div class="content">
+ It looks like your browser can't directly save this image. You might
+ be able to right click and save it below, or drag-and-drop it,
+ though.
+ <p><img id="save-fail-image">
+ </div>
+ <div class="controls">
+ <button id="save-fail-close">Close</button>
+ </div>
+</div>
+
<iframe id="saver"></iframe>
<input id="loader" type="file">
var appState = {};
+function saveFail() {
+ let saveFailDialog = document.getElementById('dialog-save-fail');
+ let saveFailImage = document.getElementById('save-fail-image');
+ let saveFailClose = document.getElementById('save-fail-close');
+
+ saveFailClose.onclick = function() {
+ saveFailDialog.style.display = 'none';
+ }
+
+ try {
+ saveFailImage.src = appState.pixelEditor.preview.toDataURL();
+ saveFailDialog.style.display = null;
+ } catch(e) {
+ console.log("toDataURL failed", e);
+ alert("Sorry, I can't save. Try right clicking and saving the preview?");
+ }
+}
+
window.savePNG = function save() {
let saver = document.getElementById('saver');
appState.pixelEditor.getFile().then(file => {
URL.revokeObjectURL(uri);
}).catch(e => {
if (e.message == "Object doesn't support property or method 'toBlob'" || e.message.search(/toBlob is not a function/)) {
- alert("Sorry, save isn't supported in this browser");
+ saveFail();
} else {
alert("unknown error");
+ saveFail();
console.log(e);
}
});
flex-flow: column;
}
+#save-fail-image {
+ width: 128px;
+ height: 128px;
+}
+
#saver, #loader {
width: 0;
height: 0;