アイコン ジェネレーター

アイコンをきぐるみにドラッグ&ドロップしてね

OK

DL

つかいかた

  1. 1. わくのパターンをえらぶ
  2. 2. じぶんのアイコンをドラッグ&ドロップする (gif,jpg,png)
  3. 3. アイコンのばしょをうごかす
  4. 4. できたアイコンをダウンロードする
  5. (おおきすぎるアイコンをつかうとぶらうざおちるかも)
ark abcdefgeijklmnopqrstuvwxyz

JavaScript


// HTML5 ドラッグ&ドロップで取得
(function($){
  'use strict';

  var e = {};
  var ns = 'http://www.w3.org/2000/svg';
  var xlink = 'http://www.w3.org/1999/xlink';
  var svgTag;
  var dragArea = document.getElementById('dragArea');
  var fileName = 'icon';
  var fileNameDef = 'image';
  var image = new Image();
  var imageDefault = new Image();
  var imageRound = new Image();

  dragArea.classList.add('ready');
  dragArea.ondragstart = function(event){
    event.dataTranfer.addElement(container);
  }
  dragArea.ondragover = function(event){
    event.preventDefault();
    this.classList.add('drag');
  }
  dragArea.ondragleave = function(event){
    event.preventDefault();
    this.classList.remove('drag');
  }
  dragArea.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];
    fileNameDef = file.name.substr(0,6);

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

    reader.onload = function(){
      var dataURL = reader.result;
      console.log(dataURL);
      insertSVG(dataURL);
    }
  }

  var createImageRound = function(img){
    imageRound.src = image.src;
    var canvasTemp = document.getElementById('canvasTemp');
    var ctx = canvasTemp.getContext('2d');
    var w = img.naturalWidth;
    var h = img.naturalHeight;
    ctx.beginPath();
    ctx.arc(canvasTemp.width/2, canvasTemp.height/2, canvasTemp.height/2, 0, Math.PI*2, false);
    ctx.clip();
    ctx.drawImage(image, 0, 0, canvasTemp.width, canvasTemp.height);
    imageRound.src = canvasTemp.toDataURL();
    ctx.clearRect(0, 0, canvasTemp.width, canvasTemp.height);
  }

  var insertSVG = function(dataURL){
      imageDefault.src = dataURL;
      image.src = imageDefault.src;

      createImageRound(image);
      
      var svg = document.getElementById('svg');
      e.svg = $(svg);
      e.base = e.svg.find('.base');
      e.svg.find('.icon').remove();
      svgTag = createSvgTag();
      e.base.prepend(svgTag);
      draggableSVG(svgTag);
      $('#DL').addClass('hide');
      $('.form').removeClass('hide');
  }

  var createSvgTag = function(){
      svgTag = document.createElementNS(ns, 'image');
      svgTag.setAttribute('x', 150);
      svgTag.setAttribute('y', 250);
      svgTag.setAttribute('width', 900);
      svgTag.setAttribute('height', 900);
      svgTag.classList.add('icon');
      svgTag.classList.add('draggable');
      svgTag.setAttributeNS(xlink, 'xlink:href', image.src);
      return svgTag
  }



  $(function(){
    e.svg = $('#svg');
    e.svg.html($('#umaru').html());

    $('.svgs a').on('click', function(){
      var id =  $(this).attr('href');
      fileName = id.substr(1);
      console.log(id);
      var clone = e.svg.find('.icon');
      e.svg.html($(id).html());

      e.svg.find('use').each(function(){
        var href = $(this).attr('xlink:href');
        $(this).attr('xlink:href', href +  'Clone');
      });
      e.svg.find('textPath').each(function(){
        var href = $(this).attr('xlink:href');
        $(this).attr('xlink:href', href +  'Clone');
      });
      e.svg.find('[id]').each(function(){
        var id = $(this).attr('id');
        id = id + 'Clone';
        $(this).attr('id',id);
      });
      e.svg.find('[clip-path]').each(function(){
        var clipPath = $(this).attr('clip-path');
        console.log(clipPath);
        clipPath = clipPath.replace(/#(.*)\)/,'#$1Clone)');
        $(this).attr('clip-path',clipPath);
      });

      if(clone.length){
        e.svg.find('.base').prepend(clone);
      }

      return false;
    });

    $('#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);
      var linkDL = document.getElementById('DL')
      linkDL.setAttribute('href', url);
      linkDL.setAttribute('download', 'icon-' + fileName + '-' + fileNameDef + '.png');
      $('#DL').addClass('hide');
      $('.form').removeClass('hide');
    });


    $('input[type="range"]').on('change', function(){
      var name = $(this).attr('name');
      var val = $(this).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);
      }
    });

    $('input[name="text"]').on('keyup', function(){
      var val = $(this).val();
      e.svg.find('.textTarget').text(val);
    });
    $('input[name="color"]').on('change', function(){
      var val = $(this).val();
      e.svg.find('.fillTarget').attr({fill:val});
      e.svg.find('.strokeTarget').attr({stroke:val});
    });
    $('input[name="roundCheck"]').on('change', function(){
      image = $(this).prop('checked') ? imageRound : imageDefault;
      svgTag.setAttributeNS(xlink, 'xlink:href', image.src);
    });

  });





    //ドラッグ移動可能に
    var draggableSVG = function(svgTag){


      var draggableElements = [svgTag] || document.getElementsByClassName('draggable');
      for(var i=0,len=draggableElements.length;i<len;i++){
        draggableElements[i].setAttribute('transform', 'matrix(1 0 0 1 0 0)');
        draggableElements[i].setAttribute('transform', 'matrix(1 0 0 1 0 0)');
        draggableElements[i].addEventListener('mousedown',function(evt){selectElement(evt)});
        draggableElements[i].addEventListener('mouseup'  , function(evt){deselectElement(evt)});
      }

      var ns = null; //'http://www.w3.org/2000/svg'
      var selectedElement = 0;
      var currentX = 0;
      var currentY = 0;
      var currentMatrix = 0;

      var scgElement = document.getElementById('svg');
      var svgDoc = svg.contentDocument;

      function selectElement(evt) {
        selectedElement = evt.target;
        currentX = evt.clientX;
        currentY = evt.clientY;
        currentMatrix = selectedElement.getAttributeNS(ns, "transform").slice(7,-1).split(' ');
        console.log(currentMatrix);
        for(var i=0; i<currentMatrix.length; i++) {
          currentMatrix[i] = parseFloat(currentMatrix[i]);
        }
        selectedElement.addEventListener('mousemove', function(evt){moveElement(evt)});
      }
          
      function moveElement(evt) {
        if(!selectedElement){return false;}
        var dx = evt.clientX - currentX;
        var dy = evt.clientY - currentY;
        currentMatrix[4] += dx;
        currentMatrix[5] += dy;
        
        selectedElement.setAttributeNS(ns, "transform", "matrix(" + currentMatrix.join(' ') + ")");
        currentX = evt.clientX;
        currentY = evt.clientY;
      }
          
      function deselectElement(evt) {
        if(selectedElement){
          selectedElement.removeEventListener('mousemove');
          selectedElement = null;
        }
      }


    }



})($);



/*
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;
}

.svgTemp{
  display:none;
}


.svgs a{
  display:inline-block;
  padding:4px 8px;
  margin:4px 2px;
  line-height:32px;
  border-radius:4px;
  text-align:center;
  background-color:#dddddd;
  color:#333333;
  text-decoration:none;
}


.btn{
  display:inline-block;
  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;
}

.draggable{
  cursor:move;
}



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

.form input{
  width:200px;
  height:32px;
}


.step{
  margin:20px auto;
}
.step h3{
  font-size:24px;
  font-weight:bold;
}

ol{
  width:360px;
  margin:0 auto;
  text-align:left;
}
ol li{
  margin-top:12px;
}