fix

data/site/other/setSymbol/setSymbol.js

@@ -4,13 +4,23 @@ var svgStroke = svg.children[1]
 var svgFill = svg.children[2]
 svg.setAttribute('width', svgWidth);
 svg.setAttribute('height', svgHeight);
-fetchSVGData('rtr');
+var imageType = 'svg';
+var canvas = document.getElementById('displayCanvas');
+canvas.width = svgWidth
+canvas.height = svgHeight
+var context = canvas.getContext('2d');
+var setSymbolImage = new Image();
+setSymbolImage.onload = drawSetSymbol;
+var setSymbolPath = '';
+fetchSVGData('https://raw.githubusercontent.com/andrewgioia/Keyrune/master/svg/rtr.svg');
 
-function fetchSVGData(setCode) {
-    var url = 'https://raw.githubusercontent.com/andrewgioia/Keyrune/master/svg/' + setCode + '.svg';
+
+function fetchSVGData(url) {
+    hideShow();
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
-        if (this.readyState == 4) {
+        if (this.readyState == 4 && xhttp.status != 404) {
+            imageType = 'svg'
             setSymbolPath = xhttp.responseText.split('d="')[1].split('"></path>')[0];
             svgStroke.setAttribute('d', setSymbolPath);
             svgFill.setAttribute('d', setSymbolPath);
@@ -30,35 +40,95 @@ function fetchSVGData(setCode) {
 }
 
 function decorateSVG() {
-    var setSymbolGradient = document.getElementById('inputSetSymbolRarity').value;
-    var setSymbolStrokeColor = 'black';
-    if (setSymbolGradient == 'Common') {
-        setSymbolStrokeColor = 'white'
+    if (imageType == 'svg') {
+        var setSymbolGradient = document.getElementById('inputSetSymbolRarity').value;
+        var setSymbolStrokeColor = 'black';
+        if (setSymbolGradient == 'Common') {
+            setSymbolStrokeColor = 'white'
+        }
+        svgStroke.setAttribute('stroke', setSymbolStrokeColor)
+        svgFill.setAttribute('fill', 'url(#grad' + setSymbolGradient + ')');
+    } else {
+        drawSetSymbol()
     }
-    svgStroke.setAttribute('stroke', setSymbolStrokeColor)
-    svgFill.setAttribute('fill', 'url(#grad' + setSymbolGradient + ')');
 }
 
 function downloadSetSymbolImage(linkElement) {
-//    var setSymbolDownload = cardFinalCanvas.toDataURL()
-//    linkElement.href = setSymbolDownload
-    var serializer = new XMLSerializer();
-    var source = serializer.serializeToString(svg);
-    
-    //add name spaces.
-    if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
-        source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+    linkElement.download = 'setSymbol.' + imageType
+    if (imageType == 'svg') {
+        var serializer = new XMLSerializer();
+        var source = serializer.serializeToString(svg);
+        
+        //add name spaces.
+        if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
+            source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+        }
+        if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
+            source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+        }
+        
+        //add xml declaration
+        source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+        
+        //convert svg source to URI data scheme.
+        var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
+        
+        //set url value to a element's href attribute.
+        linkElement.href = url;
+    } else {
+        var setSymbolDownload = canvas.toDataURL();
+        linkElement.href = setSymbolDownload;
     }
-    if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
-        source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
-    }
-    
-    //add xml declaration
-    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
-    
-    //convert svg source to URI data scheme.
-    var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
-    
-    //set url value to a element's href attribute.
-    linkElement.href = url;
 }
+
+function uploadImage(event) {
+    var input = event.target;
+    var reader = new FileReader();
+    reader.onload = function() {
+        imageType = 'png';
+        hideShow();
+        setSymbolImage.src = reader.result;
+    }
+    reader.readAsDataURL(input.files[0]);
+}
+
+function drawSetSymbol() {
+    var scaleAmount;
+    if (setSymbolImage.width > setSymbolImage.height) {
+        scaleAmount = setSymbolWidth / setSymbolImage.width;
+    } else {
+        scaleAmount = setSymbolHeight / setSymbolImage.height;
+    }
+    context.globalCompositeOperation = 'source-over';
+    context.clearRect(0, 0, svgWidth, svgHeight);
+    var x1 = (svgWidth - setSymbolImage.width * scaleAmount) / 2, y1 = (svgHeight - setSymbolImage.height * scaleAmount) / 2, x2 = x1 + setSymbolImage.width * scaleAmount, y2 = y1 + setSymbolImage.height * scaleAmount;
+    context.drawImage(setSymbolImage, x1, y1, x2 - x1, y2 - y1);
+    context.globalCompositeOperation = 'source-in';
+    var gradient = context.createLinearGradient(x1, y1, x2, y1);
+    var gradientColors = document.getElementById('grad' + document.getElementById('inputSetSymbolRarity').value).innerHTML.split('stop-color:');
+    gradient.addColorStop(0, gradientColors[1].split(';')[0]);
+    gradient.addColorStop(0.5, gradientColors[2].split(';')[0]);
+    gradient.addColorStop(1, gradientColors[3].split(';')[0]);
+    context.fillStyle = gradient;
+    context.fillRect(x1, y1, x2 - x1, y2 - y1);
+}
+
+function hideShow() {
+    if (imageType == 'svg') {
+        if (svg.classList.contains('hidden')) {
+            svg.classList.remove('hidden');
+        }
+        if (!canvas.classList.contains('hidden')) {
+            canvas.classList.add('hidden');
+        }
+    } else {
+        if (canvas.classList.contains('hidden')) {
+            canvas.classList.remove('hidden');
+        }
+        if (!svg.classList.contains('hidden')) {
+            svg.classList.add('hidden');
+        }
+    }
+}
+
+