crea canvas by @Codewith.it - Codewith.it

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

References

langSpecifica la lingua del contenuto di un elemento
<title>Definisce il titolo della pagina web.
<h1>Titolo di intestazione di primo livello
animationDefinisce i parametri dell'animazione di un elemento o selettore
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
typeSpecifica la tipologia/funzione di un elemento.

Users

Log in to search for users

Explore

Find inspiration

HTML - Esercizi

Prima Coccola ebay(2)(2)(2)

form 6 da finire

la biblioteca di Francesc

Esercitazione 3

schwebish gemund

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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