convert ke jpeg atau png - VIEW-SOURCE:
Beranda
44444444

convert ke jpeg atau png

222222222
hasil convert , tersimpan di perangkat pc - laptop / galery [hp] 


 
<!--========= CONVERT ============-->
<title>Image Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
    }

    input[type="file"] {
      margin-bottom: 20px;
    }
  </style>
 
  <h1>Image Converter</h1>
  <input type="file" id="fileInput" accept="image/png, image/jpeg"><br>
  <button id="convertToJpeg">Convert to JPEG</button>
  <button id="convertToPng">Convert to PNG</button>
  <br><br>
  <canvas id="canvas" style="display: none;"></canvas>
  <a id="downloadLink" style="display: none;">Download</a>

  <script src="script.js"></script>
 
<style>
 body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f4f4f4;
        }
        input[type="file"] {
            margin-bottom: 20px;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button#convertToJpeg {
            background-color: #4CAF50;
            color: white;
        }
        button#convertToJpeg:hover {
            background-color: #45a049;
        }
        button#convertToPng {
            background-color: #008CBA;
            color: white;
        }
        button#convertToPng:hover {
            background-color: #007bb5;
        }
        a#downloadLink {
            display: block;
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            text-decoration: none;
            background-color: #f0ad4e;
            color: white;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        a#downloadLink:hover {
            background-color: #ec971f;
        }
</style>

<script>
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
document.getElementById('convertToJpeg').addEventListener('click', () => convertImage('jpeg'));
document.getElementById('convertToPng').addEventListener('click', () => convertImage('png'));

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (!file) {
        alert('Please select an image file.');
        return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.getElementById('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

function convertImage(format) {
    const canvas = document.getElementById('canvas');
    if (!canvas) {
        alert('Please upload an image first.');
        return;
    }

    let mimeType;
    if (format === 'jpeg') {
        mimeType = 'image/jpeg';
    } else if (format === 'png') {
        mimeType = 'image/png';
    } else {
        alert('Invalid format.');
        return;
    }

    const dataUrl = canvas.toDataURL(mimeType);
    const link = document.getElementById('downloadLink');
    link.href = dataUrl;
    link.download = `converted_image.${format}`;
    link.style.display = 'block';
    link.textContent = `Download ${format.toUpperCase()} image`;
}
</script>
RUANG 5 KOSONG
RUANG 6 KOSONG
RUANG 7 KOSONG
Image Converter

Image Converter





SELURUH SUSUNAN TAMPILAN FITUR DI ATAS

 
<!--------FITUR DARK LIGHT----------------> 
 <button onclick="toggleTheme('dark');">
    <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x" style='font-size:35px;color:black'></i>
  <i class="fa fa-sun-o fa-stack-1x fa-inverse" title='dark'></i>
  </span></button>
 
 <button onclick="toggleTheme('light');">
    <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x" style='font-size:35px;color:black'></i>
  <i class="fa fa-moon-o fa-stack-1x fa-inverse" title='TAHAP BERIKUT'></i>
  </span></button>
 
 <style>html {
  
}

html[data-theme='dark'] {
    background: #000;
    filter: invert(1) hue-rotate(180deg)
}
</style>


<script>
  const htmlEl = document.getElementsByTagName('html')[0];

const toggleTheme = (theme) => {
    htmlEl.dataset.theme = theme;
}
</script>
<!------------- SELESAI------------->



 
<!--==== MENYEMBUNYIKAN TAMPILAN ========-->
<style>
  .hm,footer{
    display:none;
  }
</style>
<!---SELESAI----->



<!--========= FITUR TAB 1 =========-->
<style>
.ccMultiTab {
  background-color: #263545 ;
  border: 0;
  margin: 1px ;/* 1.5rem 08?;*/
  padding: 0;
   
}
.ccMultiTab input, .ccMultiTab .content > div {
  display: none;
  color:#fff;
}
.ccMultiTab label, .ccMultiTab .content {
  border-style: solid red;
  border-width: 1px;
}
.ccMultiTab input:checked + label, .ccMultiTab .content {
  border-color: none;/*garis kotak tab*/
}
.ccMultiTab .label {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: calc(100vw - 2.5rem);
  overflow: auto;
} 
  /* BG TAB DIAM */
.ccMultiTab label {
  background-color: #263545;/* BG */
  border-color: #263545;/* BORDER */
  border-bottom: 1px solid #263545; /* GARIS BAWAH*/
  color: #fff;/* NAMA */
  cursor: pointer;
  display: inline-block;
  float: left;
  padding: 10px;/*.65rem 1.25rem;*/
  position: relative;
  top: 1px;
  transition: all .3s ease;
}
  /* TAB AKTIF*/
.ccMultiTab input:checked + label {
  background-color: #263545; /*BG*/
  color: #FFF;/*NAMA*/
  font-weight: bold;
}
.ccMultiTab .content {
  clear: both;
  padding: 1.5rem 1.25rem;
  overflow: auto;
  max-height: 350px;/* TINGGI KOTAK SCROLL */
  border-bottom: 25px solid #000; /* GARIS */
  border-top: 20px solid #000; /* GARIS */
}

.ccMultiTab #tab1e:checked ~ .content .tab1e,
.ccMultiTab #tab2e:checked ~ .content .tab2e,
.ccMultiTab #tab3e:checked ~ .content .tab3e,
.ccMultiTab #tab4e:checked ~ .content .tab4e,
.ccMultiTab #tab5e:checked ~ .content .tab5e,
.ccMultiTab #tab5e:checked ~ .content .tab6e,
.ccMultiTab #tab5e:checked ~ .content .tab7e,
.ccMultiTab #tab5e:checked ~ .content .tab8e 
{
  display: block;
}/*--dark light --*/
 html {
  
}
html[data-theme='dark'] {
    background: #000;
    filter: invert(1) hue-rotate(180deg)
}
   html[data-theme='Light Mode'] {
    background: #000;
    filter: invert(1) hue-rotate(180deg)
}
</style>

 
<fieldset class="ccMultiTab">  
   
  <input id="tab1e" name="mTab" type="radio" checked="checked"/> 
   <label for="tab1e">
   <span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x" style='font-size:35px;color:black'></i>
  <i class="fa fa-info fa-stack-1x fa-inverse" title='INFO'></i>
  </span>
   </label>  
  
<input id="tab2e" name="mTab" type="radio"/> 
  <label for="tab2e">   <span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x" style='font-size:35px;color:black'></i>
  <i class="fa fa-film fa-stack-1x fa-inverse" title='GAMBAR'></i>
   </span></label>  
  
<input id="tab3e" name="mTab" type="radio"/> 
  <label for="tab3e">  <span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x" style='font-size:35px;color:black'></i>
  <i class="fa fa-download fa-stack-1x fa-inverse" title='DOWNLOAD'></i>
  </span></label>  
  
<input id="tab4e" name="mTab" type="radio"/> 
  <label for="tab4e"> 
    <span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x" style='font-size:35px;color:black'>
    </i> 
    
<i class="fa fa-desktop fa-stack-1x fa-inverse" title='kode HTML'></i>
  </span></label>  
  
<input id="tab5e" name="mTab" type="radio"/>
  <label for="tab5e">
  <!---------------->
   </label> 
    
<input id="tab6e" name="mTab" type="radio"/>
 <label for="tab6e">
  <!--------------->
   </label> 
 
<input id="tab7e" name="mTab" type="radio"/> 
   <label for="tab7e"> 
    <!------------>
  </label>  
   
<input id="tab8e" name="mTab" type="radio"/> 
 <label for="tab8e">
 <!----------------->
   </label> 
 
  
  <!--ISI TAB-->
  <div class="content">
 
  <div class="tab1e">
    hasil convert , tersimpan di perangkat pc - laptop / galery [hp]
    </div>
    
   <div class="tab2e">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiarNKkeXpFlrURsnqxZTcv45T5tecRKObMKddkIxe5T5lbzN8kCtrceZxX3W2M24iY9oi-8cXOi58fBuBrj8N8dXbMyL2KnGO-6pyGPaT8v8PbbrGtOTrUuGqAiSS6e6RB9uAwzMYjZ7zO6T2fheX2ePtu90rn3pyhnTpSZ_TGcwRGf9_Wkb5c2VJzNJeW/s1600/11.jpg"/WIDTH='100%'> 
<br /><br />
    </div>
    
    <div class="tab3e">
<iframe height="300" style="width: 100%;" scrolling="no" title="to jpeg n png" src="https://codepen.io/La-renggong/embed/oNrzmjX?default-tab=css%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/La-renggong/pen/oNrzmjX">
  to jpeg n png</a> by La renggong (<a href="https://codepen.io/La-renggong">@La-renggong</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
    </div>
    
    <div class="tab4e">  
<pre><code> 
<!--========= CONVERT ============-->
<title>Image Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
    }

    input[type="file"] {
      margin-bottom: 20px;
    }
  </style>
 
  <h1>Image Converter</h1>
  <input type="file" id="fileInput" accept="image/png, image/jpeg"><br>
  <button id="convertToJpeg">Convert to JPEG</button>
  <button id="convertToPng">Convert to PNG</button>
  <br><br>
  <canvas id="canvas" style="display: none;"></canvas>
  <a id="downloadLink" style="display: none;">Download</a>

  <script src="script.js"></script>
 
<style>
 body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f4f4f4;
        }
        input[type="file"] {
            margin-bottom: 20px;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button#convertToJpeg {
            background-color: #4CAF50;
            color: white;
        }
        button#convertToJpeg:hover {
            background-color: #45a049;
        }
        button#convertToPng {
            background-color: #008CBA;
            color: white;
        }
        button#convertToPng:hover {
            background-color: #007bb5;
        }
        a#downloadLink {
            display: block;
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            text-decoration: none;
            background-color: #f0ad4e;
            color: white;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        a#downloadLink:hover {
            background-color: #ec971f;
        }
</style>

<script>
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
document.getElementById('convertToJpeg').addEventListener('click', () => convertImage('jpeg'));
document.getElementById('convertToPng').addEventListener('click', () => convertImage('png'));

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (!file) {
        alert('Please select an image file.');
        return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.getElementById('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

function convertImage(format) {
    const canvas = document.getElementById('canvas');
    if (!canvas) {
        alert('Please upload an image first.');
        return;
    }

    let mimeType;
    if (format === 'jpeg') {
        mimeType = 'image/jpeg';
    } else if (format === 'png') {
        mimeType = 'image/png';
    } else {
        alert('Invalid format.');
        return;
    }

    const dataUrl = canvas.toDataURL(mimeType);
    const link = document.getElementById('downloadLink');
    link.href = dataUrl;
    link.download = `converted_image.${format}`;
    link.style.display = 'block';
    link.textContent = `Download ${format.toUpperCase()} image`;
}
</script>
</code></pre>

    </div>
  
 <div class="tab5e">
    RUANG 5 KOSONG
   </div>
    
   <div class="tab6e"> 
    RUANG 6 KOSONG
   </div> 
   
    <div class="tab7e">
    RUANG 7 KOSONG
      </div> 
    <!---SELESAI-->
    
    
  </div> 
</fieldset> 



 
<!--============ CONVERT ===================-->
<title>Image Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
    }

    input[type="file"] {
      margin-bottom: 20px;
    }
  </style>
 
  <h1>Image Converter</h1>
  <input type="file" id="fileInput" accept="image/png, image/jpeg"><br>
  <button id="convertToJpeg">Convert to JPEG</button>
  <button id="convertToPng">Convert to PNG</button>
  <br><br>
  <canvas id="canvas" style="display: none;"></canvas>
  <a id="downloadLink" style="display: none;">Download</a>

  <script src="script.js"></script>
 
<style>
 body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f4f4f4;
        }
        input[type="file"] {
            margin-bottom: 20px;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button#convertToJpeg {
            background-color: #4CAF50;
            color: white;
        }
        button#convertToJpeg:hover {
            background-color: #45a049;
        }
        button#convertToPng {
            background-color: #008CBA;
            color: white;
        }
        button#convertToPng:hover {
            background-color: #007bb5;
        }
        a#downloadLink {
            display: block;
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            text-decoration: none;
            background-color: #f0ad4e;
            color: white;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        a#downloadLink:hover {
            background-color: #ec971f;
        }
</style>

<script>
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
document.getElementById('convertToJpeg').addEventListener('click', () => convertImage('jpeg'));
document.getElementById('convertToPng').addEventListener('click', () => convertImage('png'));

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (!file) {
        alert('Please select an image file.');
        return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.getElementById('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

function convertImage(format) {
    const canvas = document.getElementById('canvas');
    if (!canvas) {
        alert('Please upload an image first.');
        return;
    }

    let mimeType;
    if (format === 'jpeg') {
        mimeType = 'image/jpeg';
    } else if (format === 'png') {
        mimeType = 'image/png';
    } else {
        alert('Invalid format.');
        return;
    }

    const dataUrl = canvas.toDataURL(mimeType);
    const link = document.getElementById('downloadLink');
    link.href = dataUrl;
    link.download = `converted_image.${format}`;
    link.style.display = 'block';
    link.textContent = `Download ${format.toUpperCase()} image`;
}
</script>
Go to Link