crea canvas by @Codewith.it - Codewith.it

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

Referenze

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<h3>Titolo di intestazione di terzo livello
_topApre collegamenti ipertestuali nell'elemento parent assoluto
multipleConverte in lista a selezione multipla
<hr>Inserisce una linea orizzontale
<ul>Usato per la creazione di liste non ordinate.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Curriculum HTML

Download vlc for PC Windows

TEMPLATE: Fake Profile

I Nostri Servizi

Mostra/nascondi password

Dashboard v1(2)

Cubo 3D animato

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