crea canvas by @Codewith.it - Codewith.it

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

References

minlengthDetermina il numero minimo di caratteri per un elemento input
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<pre>Indica una parte di testo preformattato
application-x-www-form-urlencodedCodifica dei caratteri di un form
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Users

Log in to search for users

Explore

Find inspiration

Pagina sul lorem ipsum

Primo esercizio (26/01/2914)

Costruzione di tabella con html5

Test Per informatica

Costruzione Immagine

Esercizio gatto

Table (prove)(2)

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