アイコン ジェネレーター

JavaScript

// HTML5 ドラッグ＆ドロップで取得
(function(){
  'use strict';
  var svgTag;
  var ele = document.getElementById('dragArea');


  ele.classList.add('ready');
  ele.ondragstart = function(event){
    event.dataTranfer.addElement(container);
  }
  ele.ondragover = function(event){
    event.preventDefault();
    this.classList.add('drag');
  }
  ele.ondragleave = function(event){
    event.preventDefault();
    this.classList.remove('drag');
  }
  ele.ondrop = function(event){
    event.preventDefault();
    this.classList.remove('drag');
    console.log(event.dataTransfer.files);
    if(!event.dataTransfer.files.length){
      return;
    }
    var file = event.dataTransfer.files[0];
    console.log(file);

    var reader = new FileReader();
    reader.readAsDataURL(file)

    reader.onload = function(){
      var dataURL = reader.result;
      console.log(dataURL);
      var image = new Image();
      image.src = dataURL;
      var w = image.naturalWidth;
      var h = image.naturalHeight;
      //document.getElementById('base64').textContent = dataURL;
      //document.getElementById('img_url').setAttribute('value', file.name);
      //var img = document.getElementById('img');
      //img.setAttribute('src', dataURL);

      var svg = document.getElementById('svg');
      var ns = svg.namespaceURI || 'http://www.w3.org/2000/svg';
      var xlinks = 'http://www.w3.org/1999/xlink';
      var $svg = $(svg);
      $svg.find('.icon').remove();
      svgTag = document.createElementNS(ns, 'image');
      svgTag.setAttribute('x', 150);
      svgTag.setAttribute('y', 250);
      svgTag.setAttribute('width', 900);
      svgTag.setAttribute('height', 900);
      svgTag.setAttribute('class', 'icon');
      var svg_href = dataURL || 'icon-circle-yamada-gray.png';
      svgTag.setAttributeNS(xlinks, 'xlink:href', svg_href);
      $svg.prepend(svgTag);
      console.log(svg.innerHTML);
      $('#DL').addClass('hide');
      $('.form').removeClass('hide');
    }
  }




  $(function(){
    $('#svg').html($('#svg2').html());
    $('#OK').on('click', function(){
      canvg('canvas', svg.outerHTML);
      $('#DL').removeClass('hide');
      $('.form').addClass('hide');
      return false;
    });

    $('#DL').on('click', function(){
      var url = document.getElementById('canvas').toDataURL();
      var img = document.getElementById('img');
      img.setAttribute('src', url);
      document.getElementById('DL').setAttribute('href', url);
      $('#DL').addClass('hide');
    });

    
    $('input[type="range"]').on('change', function(){
      var name = $(this).attr('name');
      var val = $(this).val();
      console.log(val);
      if(name === 'x' || name === 'y'){
        svgTag.setAttribute(name, val);
      }else if(name === 'zoom'){
        svgTag.setAttribute('width', 900 * val /100);
        svgTag.setAttribute('height', 900 * val /100);
      }
    });

  });



})();



/*
http://blog.harapeko.jp/2012/08/10/svguseelement/

svgTag.setAttributeNS(ns, 'xlink:href', svg_href);
xlink:href は setAttribute,setAttributeNS系では無理
代わりにele.href.baseVal = href; を使う

または
var xlinks = 'http://www.w3.org/1999/xlink';
svgTag.setAttributeNS(xlinks, 'xlink:href', svg_href);
*/

/*
  var ns = 'http://www.w3.org/2000/svg';
  var xlinks = 'http://www.w3.org/1999/xlink';

  var svg = document.getElementById('svg');
  var ns = 'http://www.w3.org/2000/svg';
  var svgTag = document.createElementNS(ns, 'image');
  svgTag.setAttribute('x', 0);
  svgTag.setAttribute('y', 0);
  svgTag.setAttribute('width', 1200);
  svgTag.setAttribute('height', 1200);
  var svg_href = 'icon-circle-yamada-gray.png';
  //svgTag.setAttributeNS(ns, 'xlink:href', svg_href);
  //svgTag.href.baseVal = svg_href;
  svg.appendChild(svgTag);
  console.log(svgTag);
*/

CSS

div.module{
  width:400px;
  margin:0 auto;
  text-align:center;
  padding:40px 0;
}
.module p{
  margin:12px;
}
#code{
  display:none;
}


h1{
  font-size:32px;
}

#dragArea{
  width:400px;
  height:400px;
}
#dragArea.drag{
  background-color:#ffdddd;
}
#demo{
  background-color:#eeeeee;
}

img,
canvas,
svg{
  width:400px;
  height:400px;
}
img,
canvas{
  display:none;
}
#svg2{
  display:none;
}


a{
  padding:8px 16px;
  margin:8px;
  border:1px solid #999999;
  border-radius:4px;
  text-decoration:none;
  background-color:#ffffff;
  color:#333333;
  font-size:32px;
  font-weight:bold;
}
a:hover{
  background-color:#ffdddd;
}
.hide{
  display:none;
}
.show{
  display:inline-block;
}

.form{
  margin:20px;
}
.form span{
  display:inline-block;
  width:120px;
}
.form label{
  display:block;
}