document.title = 'お札メーカー';

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


$(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();
  });


});

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

#target{

  background-image:url(osatsu.png);
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  cursor:pointer;
  width:100%;
  aspect-ratio: 63 / 30;
  position:relative;
  left:0;
  bottom:0;
}

#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{
  position:absolute;
  right:0;
  bottom:0;
  width:200px;
  margin:30px;
  overflow:hidden;
  aspect-ratio: 12 / 12;
  filter: sepia(80%);
}

#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;
}

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

view-source:https://hi0a.com/demo/-js/js-talk-money-maker/