crea canvas by @Codewith.it - Codewith.it

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

Referenze

<i>Formatta il testo in corsivo/italico non enfatizzato
requiredRende obbligatorio un campo di input
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<input>Definisce un area di input per l'invio di dati e informazioni
<tr>Definisce le righe di una tabella (rows)
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

TechForge | Riparazioni e Stampa 3D

Esercitazione 3

Form Raccolta Segnalazioni Immobil

Prova lezione 1

esercizio_tabella.htm.

esercitazione n1

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