crea canvas by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<abbr>Inserisce abbreviazioni e acronimi
methodDetermina il metodo di invio dei dati di un form al server
maxImposta il valore numerico o temporale massimo per un elemento input
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
idIdentifica univocamente un elemento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione esame

animation background

esercitazione4.html

La danza del Fuoco e delle Ombre

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<style>
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
</style>
<script src="https://raw.githubusercontent.com/josefrichter/resize/master/public/preprocess.js"></script>
<div id="banner-cont">
  <div class="banner-cont">
    <canvas id="myCanvas" width="650" height="400" style="border:1px solid #000000; ">
    </canvas> 
        <label>URL Immagine:</label>
    <input id="pimage" class="pimage" onchange="drawCanvas()" value="https://th.bing.com/th/id/OIP.90UVucr7YJx9dXiz_tUykQHaBa?pid=ImgDet&amp;rs=1">
    <div class="sub-banner-cont">
      <label>Qualità:</label>
      <input id="pquality" onchange="drawCanvas()" type="number" value="0.7" step="0.1" max="1" min="0" class="adjust">
      <label>Dimensioni file:</label>
      <input id="filesize" readonly="" class=" adjust"></div>
    <button onclick="drawCanvas()">
      Rigenera
    </button>  
    <button onclick="download()">
      Download
    </button>   
    <button onclick="baseCopy()">
      Copia Base64
    </button>
  </div>
  <hr>
  <div class="banner-cont" style="width:600px">
    <div class="sub-banner-cont">
      <label>Prima riga:</label>
      <input placeholder="testo" type="text" value="Come fare" id="postTitle" onchange="drawCanvas()">
      <label>Seconda riga:</label>
      <input placeholder="testo" type="text" value=" la maionese" id="postTitle2" onchange="drawCanvas()">
    </div>
    <div class="sub-banner-cont">
      <label>Sottotitolo:</label>
      <input placeholder="Sottotitolo" type="text" value="ricetta facile" id="postSubtitle" onchange="drawCanvas()">
      <label>Sottotitolo 2:</label>
      <input placeholder="Sottotitolo 2" type="text" value="Per te" id="postSubtitle2" onchange="drawCanvas()">
    </div>
    <div class="sub-banner-cont">
      <label>Colore:</label>
      <input placeholder="colore" type="color" id="baseColor" onchange="drawCanvas()" value="#ff0000"> <label>Opacità:</label>
      <input placeholder="colore" type="range" id="baseOpacity" onchange="drawCanvas()" value="#ff0000">
    </div>
    <hr>
    <h5>
      Base
    </h5>
    <div class="sub-banner-cont">
      <label>Posizione orizzontale:</label>
      <input id="adjustX" class="adjust" type="number" value="0" onchange="drawCanvas()" step="10">
      <label>Angolazione:</label>
      <input id="adjustX2" class="adjust" type="number" value="0" onchange="drawCanvas()" step="10">
    </div> 
    <h5>
      Posizione testo
    </h5>
    <div class="sub-banner-cont">

      <label>Offset Testo (H):</label>
      <input id="textOffsetH" class="adjust" type="number" value="0" onchange="drawCanvas()" step="10">
      <label>Offset Testo (V):</label>
      <input id="textOffsetV" class="adjust" type="number" value="0" onchange="drawCanvas()" step="10">  
    </div>  
    <h5>
      Dimensioni
    </h5>
    <div class="sub-banner-cont">

      <label>Grandezza testo:</label>
      <input id="textSize" class="adjust" type="number" value="0" onchange="drawCanvas()" step="1">
      <label>Strech immagine:</label>
      <input id="strechImg" class="adjust" type="number" value="0" onchange="drawCanvas()" step="5">
    </div>
    <h5>
      Posizione immagine
    </h5>
    <div class="sub-banner-cont">
      <label>Pos. immagine (X):</label>
      <input id="posImgX" class="adjust" type="number" value="0" onchange="drawCanvas()" step="10">    
      <label>Pos. immagine (Y):</label>
      <input id="posImgY" class="adjust" type="number" value="0" onchange="drawCanvas()" step="10">
    </div>
  </div>
</div>
<br>
<br>
<br>

.adjust {
  width:100px;

} 
#banner-cont{
  display:flex;
  flex-direction:row;
  margin:0 50px;
}
.banner-cont{
  display:flex;
  flex-direction:column;
  margin:auto;
  padding:20px;
  width:400px;
  background:#BDBDBD;
  grid-gap:20px;
}
#banner-cont canvas{
  background:white;
}
.sub-banner-cont{
  display:flex;
  flex-direction:row;
  margin:auto;
  grid-gap:10px;
}
.sub-banner-cont input[type="text"]{
  width:25%;
}
.sub-banner-cont input[type="number"]{
  width:50px;
}
.banner-cont input[type="range"]{
  width:50%;
}

var pcolor = document.getElementById('baseColor');
var popacity = document.getElementById('baseOpacity');
var ptitle = document.getElementById('postTitle');
var ptitle2 = document.getElementById('postTitle2');
var psubtitle = document.getElementById('postSubtitle');
var psubtitle2 = document.getElementById('postSubtitle2');
var adjustX = document.getElementById('adjustX');
var adjustX2 = document.getElementById('adjustX2');
var canvas = document.getElementById("myCanvas");
//var img = document.getElementById("");
function download() {
  var pquality = document.getElementById('pquality').value;
  var link = document.createElement('a');
  link.download = ptitle.value+ " "+ ptitle2.value+'.jpg';
  link.href =  document.getElementById('myCanvas').toDataURL('image/jpeg', parseFloat(pquality));
  link.click();
}

function drawCanvas() {

  var pimage = document.createElement('img');
  pimage.src = document.getElementById('pimage').value;
  pimage.crossOrigin="anonymous";
  let opacity = popacity.value;
  opacity = opacity.replace(7,"A");
  opacity = opacity.replace(8,"C");
  opacity = opacity.replace(9,"E");
  if(popacity.value == 100){
    opacity = "ff"
  }
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  let strechImg =  document.getElementById("strechImg").value;
  let posImgX =  document.getElementById("posImgX").value;
  let posImgY =  document.getElementById("posImgY").value;

  ctx.drawImage(pimage, (1-posImgX), (1-posImgY),(650-strechImg),(400-strechImg));
  ctx.fillStyle = pcolor.value+opacity;
  ctx.beginPath(); 
  //rettangolo
  ctx.moveTo(650, 0);
  ctx.lineTo((350 - adjustX.value - adjustX2.value),0);
  ctx.lineTo((450 - adjustX.value), 400);
  ctx.lineTo(650, 400);
  ctx.closePath();
  ctx.fill(); 
  ctx.textAlign= "right";
  let txtSet = document.getElementById("textSize").value;
  let txtOffsetH =  document.getElementById("textOffsetH").value;
  let txtOffsetV =  document.getElementById("textOffsetV").value;
  let tposX = 620 - txtOffsetH;
  let tposY = 80 - txtOffsetV;  
  let txtSize = 42 + (txtSet*1);
  ctx.font = "bold "+ txtSize + "px Trebuchet MS";
  ctx.fillStyle = "#ffffff";
  ctx.lineWidth = 2;
  //prima riga
  ctx.fillText(ptitle.value, tposX, tposY);
  ctx.strokeText(ptitle.value,tposX,tposY);
  //Seconda riga
  ctx.fillText(ptitle2.value, tposX, tposY + 50);
  ctx.strokeText(ptitle2.value,tposX,tposY+50);
  //sottotitoli
  txtSize = 32 + (txtSet*1);
  ctx.font = txtSize+"px Trebuchet MS";
  ctx.lineWidth = 1.4;
  ctx.fillText(psubtitle.value, tposX, tposY + 120);
  ctx.strokeText(psubtitle.value,tposX,tposY + 120);
  ctx.fillText(psubtitle2.value, tposX, tposY + 165);
  ctx.strokeText(psubtitle2.value,tposX,tposY + 165);

  //get file size
  let pquality = document.getElementById('pquality').value;
  let dataurl = document.getElementById('myCanvas').toDataURL('image/jpeg', parseFloat(pquality));
  var head = 'data:image/jpeg;base64,';
  var imgFileSize = Math.round((dataurl.length - head.length)*3/4) ;
  document.getElementById('filesize').value = imgFileSize/1000 + " kb ca."

}
drawCanvas();


function baseCopy(){
  var pquality = document.getElementById('pquality').value;
  let link = canvas.toDataURL('image/jpeg', parseFloat(pquality));
  var input = document.createElement('input');
  input.setAttribute('value', link);
  document.body.appendChild(input);
  input.select();
  var risultato = document.execCommand('copy');
  document.body.removeChild(input);
  alert('testo copiato: '+ link);
  return risultato;
}