Driehoek SVG

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
<div id="top">
	<input id="image_width" type="number" value="1" min="1" step="1" />
	<input id="steps" type="number" value="2" min="2" step="1" />
	<input id="step" type="range" value="1" min="1" max="2" step="1" />
	<select id="cat">
		<option value="ISO">ISO</option>
		<option value="Shutter">Shutter speed</option>
		<option value="Aperture">Aperture</option>
	</select>
	<button onClick="doExport()">Download all in ZIP</button>
</div>
<svg width="300" id="input" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0.5 800.5 1100 825" enable-background="new 0.5 800.5 1100 825" xml:space="preserve" color-interpolation-filters="sRGB">

	<filter id="noise" x="-10%" y="-10%" width="120%" height="120%">
		<feTurbulence type="fractalNoise" baseFrequency="4" numOctaves="2" result="turbulence" />
		<feColorMatrix in="turbulence" type="luminanceToAlpha" result="turb2" />

		<!-- Set brightness and contrast on noise, and invert noise for one to prevent overlap/cancellation -->
		<feComponentTransfer in="turb2" result="b1">
			<feFuncA id="iso_white1" type="linear" slope="1.2"/><!-- 1.0 - 1.2 -->
		</feComponentTransfer>
		<feComponentTransfer in="b1" result="n1">
			<feFuncA type="table" tableValues="0 0 0 0 1"/>
		</feComponentTransfer>

		<feComponentTransfer in="turb2" result="invturb2">
			<feFuncA type="table" tableValues="1 0"/>
		</feComponentTransfer>
		<feComponentTransfer in="invturb2" result="b2">
			<feFuncA id="iso_black1" type="linear" slope="1.6"/><!-- 1.0 - 1.6 -->
		</feComponentTransfer>
		<feComponentTransfer in="b2" result="n2">
			<feFuncA type="table" tableValues="0 0 0 0 1"/>
		</feComponentTransfer>

		<!-- Set noise color to white or black and adjust opacity -->
		<feComponentTransfer in="n1"...

CSS

*, *:before, *:after { margin:0; padding:0; box-sizing:border-box; }

body {
	padding-top: 60px;
}

#top {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: auto;
}

JavaScript

var image_width = 500,
	steps = 9,
	step = 1,
	cat = 'ISO',
	params = [
		{
			'iso_wnoise1': '1.0',
			'iso_bnoise1': '1.0',
			'iso_wnoise2': '0.5',
			'iso_shade': '0.56',
			'shutter_blurx': '0',
			'shutter_blury': '0',
			'shutter_shade': '0.56',
			'aperture_blur': '0',
			'aperture_shade': '0.4',
		},
		{
			'iso_wnoise1': '1.2',
			'iso_bnoise1': '1.6',
			'iso_wnoise2': '0.8',
			'iso_shade': '0',
			'shutter_blurx': '48',
			'shutter_blury': '1',
			'shutter_shade': '0',
			'aperture_blur': '56',
			'aperture_shade': '0',
		},
	],
	export_cat = 0,
	export_cats = ['ISO', 'Shutter', 'Aperture'],
	export_step = 1,
	zip;

function doExport() {
	if (0 == export_cat && 1 == export_step) {
		zip = new JSZip();
	}
	// NOTE: .val() does not trigger onChange
	if (1 == export_step) {
		cat = export_cats[ export_cat ];
		$('#cat').val( export_cats[ export_cat ] );
	}
	step = export_step;
	$('#step').val( export_step );

	adjustSVG(cat);
	addPNG();
}

function addPNG() {
	var mySVG    = document.querySelector('#input'), // Inline SVG element
		tgtImage = document.querySelector('#output'), // Where to draw the result
		can      = document.createElement('canvas'), // Not shown on page
		ctx      = can.getContext('2d'),
		loader   = new Image; // Not shown on page

	loader.width  = can.width  = tgtImage.width;
	loader.height = can.height = tgtImage.height;
	loader.onload = function(){
		ctx.drawImage( loader, 0, 0, loader.width, loader.height );
		var imgUrl = can.toDataURL();
		tgtImage.src = imgUrl;

		zip.file(
			(export_cats[ export_cat ].substring(0,1).toLowerCase()) + export_step + '.png',
			imgUrl.split('base64,')[1],
			{ base64: true }
		);

		export_step++;
		if (steps < export_step) {
			export_step = 1;
			export_cat++;
		}
		if (export_cats.length == export_cat) {
			export_cat = 0;

			zip.generateAsync({ type: "blob" }).then(function(blob) {
				// see FileSaver.js
				saveAs(blob, "test.zip");
			}, function(err) {
				console.error( err...