アイコンジェネレーター

うまるねことまとさんたたまごどろいどはんばーがーだんぼーるべるさぼてんえすれあまりおしるくはっとどろぼうはげめがねいえいあーくまる
アイコンをきぐるみにドラッグ＆ドロップしてね
つかいかた

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

  view source
  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;
}

  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/img-icon/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。
アイコン ジェネレーター

つかいかた

JavaScript

CSS

HTML

ABOUT

アイコンジェネレーター
