diff --git a/README.md b/README.md
index 0cd82c0..53ecad9 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
# Shadertoy frame exporter
-Save PNG frames from Shadertoy
+Save frames from Shadertoy to PNG or JPG
-
+
## Installation
diff --git a/inject.js b/inject.js
index f97c5db..9a94532 100644
--- a/inject.js
+++ b/inject.js
@@ -5,5 +5,5 @@ function injectScript(file, node) {
s.setAttribute('src', file);
th.appendChild(s);
}
-injectScript( chrome.extension.getURL('/main.js'), 'body');
-injectScript( chrome.extension.getURL('/lib/FileSaver-2.0.4.min.js'), 'body');
+injectScript( chrome.runtime.getURL('/main.js'), 'body');
+injectScript( chrome.runtime.getURL('/lib/FileSaver-2.0.4.min.js'), 'body');
diff --git a/main.js b/main.js
index 0842137..e70bceb 100644
--- a/main.js
+++ b/main.js
@@ -144,7 +144,7 @@ FrameExporter.prototype.render = function(original_render) {
this.frameUpdated = false;
original_render();
- this.saveFrame(gShaderToy.mCanvas, function() {
+ this.saveFunction(gShaderToy.mCanvas, function() {
this.frameCounter.incrementFrame();
if (this.frameCounter.looped) {
this.stopRecording();
@@ -232,11 +232,34 @@ FrameExporter.prototype.createUi = function() {
}
}.bind(this));
- var button = document.createElement('button');
- button.textContent = 'Save frames';
- this.addClass(button, 'sfe-save');
- this.controls.appendChild(button);
- button.addEventListener('click', this.startRecording.bind(this));
+ this.controls.appendChild(document.createElement('div')); // To force line return for save controls
+
+ // PNG Save part
+ var buttonPNG = document.createElement('button');
+ buttonPNG.textContent = 'Save as png';
+ this.addClass(buttonPNG, 'sfe-save');
+ this.controls.appendChild(buttonPNG);
+ buttonPNG.addEventListener('click', function() {
+ this.saveFunction = FrameExporter.prototype.saveFramePNG;
+ this.startRecording.bind(this)();
+ }.bind(this));
+
+ // JPG Save part
+ var jpgQualityInput = this.createInput('JPG Quality', 'number', 0.8);
+ jpgQualityInput.step = 0.05;
+ this.jpgQualityInput = jpgQualityInput;
+ this.jpgQualityInput.addEventListener('change', function(event) {
+ if (jpgQualityInput.value < 0) jpgQualityInput.value = 0;
+ if (jpgQualityInput.value > 1) jpgQualityInput.value = 1;
+ });
+ var buttonJPG = document.createElement('button');
+ buttonJPG.textContent = 'Save as jpg';
+ this.addClass(buttonJPG, 'sfe-save');
+ this.controls.appendChild(buttonJPG);
+ buttonJPG.addEventListener('click', function() {
+ this.saveFunction = FrameExporter.prototype.saveFrameJPG;
+ this.startRecording.bind(this)();
+ }.bind(this));
this.settingsChanged();
};
@@ -289,7 +312,7 @@ FrameExporter.prototype.createInput = function(name, type, value) {
/* Utilities
========================================================================== */
-FrameExporter.prototype.saveFrame = function(canvas, done) {
+FrameExporter.prototype.saveFramePNG = function (canvas, done) {
var totalFrames = this.frameCounter.totalFrames;
var digits = totalFrames.toString().length;
var frameString = this.pad(this.frameCounter.frameNumber, digits);
@@ -300,6 +323,17 @@ FrameExporter.prototype.saveFrame = function(canvas, done) {
});
};
+FrameExporter.prototype.saveFrameJPG = function (canvas, done) {
+ var totalFrames = this.frameCounter.totalFrames;
+ var digits = totalFrames.toString().length;
+ var frameString = this.pad(this.frameCounter.frameNumber, digits);
+ var filename = this.prefix + frameString + '.jpg';
+ canvas.toBlob(function(blob) {
+ saveAs(blob, filename);
+ setTimeout(done, 100);
+ }, 'image/jpeg', this.jpgQualityInput.value);
+};
+
FrameExporter.prototype.insertAfter = function(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
};
diff --git a/manifest.json b/manifest.json
index d6a9957..b073d2f 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,5 +1,5 @@
{
- "manifest_version": 2,
+ "manifest_version": 3,
"name": "Shadertoy frame exporter",
"version": "0.2.6",
"description": "High quality timed frame export from Shadertoy",
@@ -15,8 +15,14 @@
"css": ["styles.css"]
}
],
- "web_accessible_resources": [
- "main.js",
- "lib/FileSaver-2.0.4.min.js"
- ]
+ "host_permissions": ["https://www.shadertoy.com/view/*"],
+ "web_accessible_resources": [{
+ "resources": [
+ "main.js",
+ "lib/FileSaver-2.0.4.min.js"
+ ],
+ "matches":[
+ "https://*/*"
+ ]
+ }]
}
diff --git a/screenshot.png b/screenshot.png
index 9cdbe4e..da60567 100644
Binary files a/screenshot.png and b/screenshot.png differ