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 -Screenshot +Screenshot ## 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