漫画風ふきだし画像メーカー

JavaScript

document.title = '漫画風ふきだし画像メーカー';


$(function(){

  $('#demo p').attr({contentEditable:'true'});
  $('.balloon').draggable({
    handle: '.handle',
  });
  $('.balloon').resizable();

  $(document).on('keyup', 'textarea', function(e){
    var text = $(this).val();
    text = text.replace(/\n/img,'<br>');
    $('#demo p').html(text);
  });
  $('textarea').trigger('keyup');

  $(document).on('click', '[name="balloon"]', function(e){
    var v = $('input:radio[name="balloon"]:checked').val();
    $('.balloon')
      .removeClass('up')
      .removeClass('down')
      .removeClass('left')
      .removeClass('right')
      .removeClass('none')
      .removeClass('sakebi')
      .removeClass('kangae');
    $('.balloon')
      .addClass(v);
  });
  $(document).on('click', '[name="angle"]', function(e){
    var v = $('input:radio[name="angle"]:checked').val();
    $('.balloon')
      .removeClass('yoko')
      .removeClass('tate');
    $('.balloon')
      .addClass(v);
  });
  $(document).on('click', '[name="align"]', function(e){
    var v = $('input:radio[name="align"]:checked').val();
    $('.balloon')
      .removeClass('text-left')
      .removeClass('text-center');
    $('.balloon')
      .addClass(v);
  });
  $(document).on('click', '[name="effect"]', function(e){
    var v = $('input:checkbox[name="effect"]:checked').val();
    $('.effect')
      .removeClass('syutyu');
    $('.effect')
      .addClass(v);
  });
  $('input:radio[name="balloon"]:checked').trigger('click');
  $('input:radio[name="angle"]:checked').trigger('click');
  $('input:radio[name="align"]:checked').trigger('click');

  $(document).on('change', '[name="radius"]', function(e){
    var v = $(this).val();
    $('.balloon')
      .css({borderRadius:v+'px'});
  });

  $(document).on('change', '.file', function(e){
    var ele = $(this);
    var img = ele.parent().find('img');
    var event = e.originalEvent;
    console.log(event);
    var file = event.target.files[0];
    if (!file.type.match('image.*')){
        return;
    }
    console.log(file);
    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      console.log(dataURL);
      var newImage = new Image();
      newImage.src = dataURL;
      newImage.onload = function(){
        img[0].src = newImage.src;
      }
    }
    reader.readAsDataURL(file);
  });
});


$(function(){
  var form = $('form');
  var input = $('.balloon');
  
  var size = $('<input>', {title:'文字サイズ',type:'number'}).css({width:44}).val(15).on('change', function(){
    var val = $(this).val();
    input.css({
      fontSize: val + 'px'
    });
  });
  var fontColor = $('<input>', {title:'文字色',type:'color'}).css({width:44}).on('change', function(){
    var val = $(this).val();
    input.css({
      color: val
    });
  });
  var backgroundColor = $('<input>', {title:'背景色',type:'color'}).css({width:44}).on('change', function(){
    var val = $(this).val();
    input.css({
      backgroundColor: val
    });
  });
  var weight = $('<select>', {title:'太字'}).css({width:120}).on('change', function(){
    var val = $(this).val();
    input.css({
      fontWeight: val
    });
  });

  var weights = [
    'noramal',
    'bold',
    'lighter',
    '100',
    '200',
    '400',
    '900',
  ];
  weights.forEach(function(v){
    var opt = $('<option>').text(v).css({fontWeight:v});
    weight.append(opt);
  });

  var fontFamily = $('<select>', {title:'フォント'}).css({width:120}).on('change', function(){
    var val = $(this).val();
    input.css({
      fontFamily: val
    });
    div.css({
      fontFamily: val
    });
  });
  var fonts = [
    'メイリオ',
    'MS ゴシック',
    'HGｺﾞｼｯｸE',
    'HGｺﾞｼｯｸM',
    'HGP創英角ｺﾞｼｯｸUB',
    'HG丸ｺﾞｼｯｸM-PRO',
    'Arial',
    'Arial black',
    'Impact',
    'monospace',
    'sans-serif',
    'serif',
    'cursive',
    'fantasy',
  ];
  fonts.forEach(function(v){
    var opt = $('<option>').text(v).css({fontFamily:v});
    fontFamily.append(opt);
  });

  form
    .append(size)
    .append(fontColor)
    .append(weight)
    .append(fontFamily);
});
  

$(function(){
  $('#toImg').on('click', function(){
    html2canvas(document.querySelector("#target")).then(canvas => {
      console.log(canvas);
      document.querySelector("#screenshot").textContent = '';
      document.querySelector("#screenshot").appendChild(canvas)
    });
  });

  $(document).on('click', '#screenshot canvas', function(){
    var canvas = $(this);
    var data = canvas[0].toDataURL('image/png');
    var a = $('<a>', {href:data,download:'fukidashi-talk'});
    a[0].click();
  });


});

CSS

#demo{
  background-color:#eee;
  text-align:center;
}
*{
  box-sizing: border-box;
}
#target{
  display:inline-block;
  background-color:#fff;
  position:relative;
  top:0;
  left:0;
}

#target img{
  min-width:400px;
}

.balloon-area{
  position: relative;
  left:0;
  top:0;
  min-height:240px;
}
.handle{
  position: absolute;
  top:0;
  left:0;
  width:20px;
  height:20px;
  background-color:#000;
  opacity:.5;
  display:none;
  cursor:pointer;
}
.balloon:hover .handle{
  display:block;
}

.balloon {
  position: absolute;
  left:40%;
  top:5%;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  max-width: 100%;
  background-color: #FFF;
  border: solid 3px #000;
  border-radius:16px;
  box-sizing: border-box;
  z-index:5;
}

.balloon:before {
  content: "";
  position: absolute;
  z-index: 2;
}

.balloon:after {
  content: "";
  position: absolute;
  border: 14px solid transparent;
  z-index: 1;
}

.down:before{
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
}
.down:after{
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border-top: 14px solid #000;
}


.up:before{
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
}
.up:after{
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border-bottom: 14px solid #000;
}


.left:before{
  top: 50%;
  left: -24px;
  margin-top: -15px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
}
.left:after{
  top: 50%;
  left: -30px;
  margin-top: -17px;
  border-right: 14px solid #000;
}


.right:before{
  top: 50%;
  right: -24px;
  margin-top: -15px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
}
.right:after{
  top: 50%;
  right: -30px;
  margin-top: -17px;
  border-left: 14px solid #000;
}
.balloon p{
  position:relative;
  top:0;
  left:0;
}
.balloon img{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  width:100%;
  height:100%;
}

/*SVGは画像変換できない*/
.sakebi{
  border:none;
  background-color:transparent;
  background-image:url(fukidashi-sakebi.png);
  background-size:100% 100%;
  background-position:50%;
  background-repeat:no-repeat;
  padding:40px;
}
.kangae{
  border:none;
  background-color:transparent;
  background-image:url(fukidashi-kangae.png);
  background-size:100% 100%;
  background-position:50%;
  background-repeat:no-repeat;
  padding:40px;
}

.text-left{
  text-align:left;
}
.text-center{
  text-align:center;
}

.balloon p{
  margin:12px;
}

.effect{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  width:0;
  height:0;
  background-size:100% 100%;
  background-position:50%;
  background-repeat:no-repeat;
}
.effect.syutyu{
  z-index:2;
  width:100%;
  height:100%;
  background-image:url(syutyu.png);
}

.tate p{
  writing-mode: vertical-rl;
}
h3{
  font-weight:bold;
}
textarea{
  width:100%;
  height:6em;
}

balloon{
  position:absolute;
  left:50px;
  top:50px;
}

balloon-in{
  position:relative;
  left:0;
  top:0;
  display:inline-block;
  text-align:left;
  background-color:#ffffff;
  border-radius:24px;
  min-width:20px;
  padding:18px;
  margin:0 16px;
}

input[type="file"]{
  display:none;
}

button{
  font-size:24px;
  padding:48px;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-image-fukidashi/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。

ふきだしの形状・三角の位置

ふきだしの丸み

文章の向き

文章の並び

エフェクト

フォント

JavaScript

CSS

HTML

ABOUT