指名手配書メーカー | ひまあそび-ミニゲーム

WANTED

YOUR NAME $ 999,999,999 DEAD OR ALIVE

セピア:

「指名手配書」とは

特定の事件の捜査を担当する警察が、全国の警察（および同一都道府県内の他の警察署）に対して「逮捕状の発せられている被疑者の逮捕を依頼し、逮捕後身柄の引渡しを要求する」ために指名手配書によって行う。つまり、逮捕状が出ているが、逃亡などで被疑者の所在が不明である場合に行うものであり、都道府県警察に手配する。


  view source
  JavaScript
  document.title = '指名手配書メーカー';

$(function(){
  $('name,h2,bounty,text').attr({contentEditable:'true'});

  
  $('#cat').on('click', function(){
    $('h2').text('迷子猫');
    $('photo img').attr({src:'wanted-cat.png'});
    $('name').text('さがしています');
    $('bounty').text('XXXX市YYYY町');
    $('text').text('オス 三毛猫 5歳');
  });
});


$(function(){

  $(document).on('change', '[type="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;
        if($('[name="sepia"]').prop('checked')){
          toSepia(newImage, img[0]);
        }
      }
    }
    reader.readAsDataURL(file);
  });
});

function toSepia(newImage, img){
  var canvas = document.createElement('canvas');
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;

  //let demo = document.getElementById('demo');
  //demo.appendChild(canvas);
  w = newImage.naturalWidth || w;
  h = newImage.naturalHeight || h;
  canvas.setAttribute('width',w);
  canvas.setAttribute('height',h);
  var ctx = canvas.getContext('2d');

  ctx.drawImage(newImage, 0,0,w, h);

  var imagedata = ctx.getImageData(0,0,w,h);
  var idata = imagedata.data;

  var num = idata.length;
  var pix = num / 4;

  for ( var i = 0 ; i < pix ; i++ )
  {
    var r = idata[ i*4 ];
    var g = idata[ i*4 + 1 ];
    var b = idata[ i*4 + 2 ];

    var g = parseInt(( r*30 + g*59 + b*11 ) / 100);
    idata[ i*4 ] = parseInt( (g/255)*240 );
    idata[ i*4 + 1 ] = parseInt( (g/255)*200 );
    idata[ i*4 + 2 ] = parseInt( (g/255)*145 );
    //idata[ i*4 ] = g;
    //idata[ i*4 + 1 ] = g;
    //idata[ i*4 + 2 ] = g;
  }
  ctx.putImageData(imagedata,0,0);

  src = canvas.toDataURL('image/png');
  img.src = src;
}



$(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 name = $('name').eq(0).text();
    var a = $('<a>', {href:data,download:'wanted-'+name});
    a[0].click();
  });


});

  CSS
  #demo{
  position:relative;
  left:0;
  top:0px;
  max-width:640px;
  width:100%;
  margin:0 auto;
	font-family: LINE;
}

#target{

  background-image:url(wanted-paper.png);
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  cursor:pointer;
  width:100%;
  aspect-ratio: 1274 / 1800;
}

#target h2,
#target photo,
#target name,
#target text,
#target bounty{
  display:block;
  margin:0 auto;
  font-size:64px;
  font-weight:800;
  font-family:serif;
  color:#4A3C25;
  text-align:center;
}

#target h2{
  font-size:128px;
  padding-top:32px;
}
#target name{
  font-size:80px;
  padding:4px 0;
}
#target bounty{
  font-size:80px;
  padding:4px 0;
}
#target text{
  font-size:60px;
  padding:4px 0;
}

#target photo{
  width:600px;
  margin:12px auto;
  overflow:hidden;
  aspect-ratio: 16 / 12;
}

#target photo img{
  height:100%;
  max-width:100%;
}

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

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