“Genggam Dunia dengan Tekonlogi Bersama Program Studi Teknik Informatika”

Daftarkan Saya

Bucin ala anak Teknik Informatika.. “Edit Gambar pakai Coding”

adel

Cinta ala anak Teknik Informatika.. “Edit Gambar pakai Coding”

Videonya bisa lihat disini  https://www.instagram.com/p/CurL1lRvp29/

Halo gaes, berikut ini share cuplikan kode untuk bisa merubah background foto menjadi warna biru.

Caranya :
1. Copy script dibawah ini kemudian simpan dengan nama index.php
2. Letakkan file tersebut didalam htdoc xampp
3. Running melalui browser
contoh : localhost/change_background/index.php
4. Upload Gambar dengan latar merah
5. Tadaaaaa… Foto mu sekarang berganti backgroundnya menjadi warna biru..

Selamat Mencoba..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div>
        <div>
        <div>
        <form>
        <div>
        <label for="fileInput">Select a File: </label> 
        <input id="fileInput" 
        type="file">
        </div>
        <input 
        type="button"  onclick="submitHandler()"
        value="Upload">
        </form>
        <button
         onclick="downloadFile()">
         Download
        </button>
         </div>
        </div>
        </div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
    let imageURL;
    function submitHandler(){
        console.log("click");
const fileInput = document.getElementById('fileInput');
        console.log(fileInput.files);
        const image = fileInput.files[0];
        // Multipart file
        const formData = new FormData();
        formData.append('image_file', image);
        formData.append('size', 'auto');
        formData.append('bg_color', 'blue');
        const apiKey = 'INI_GANTI_DENGAN_API_REMOVE_BG_KALIAN_YH';
        fetch('https://api.remove.bg/v1.0/removebg',{
            method:'POST',
            headers: {
            'X-Api-Key': apiKey
         },
         body: formData
        })
        .then(function(reponse){
                return reponse.blob()
        })
        .then(function(blob){
                console.log(blob);
                const url = URL.createObjectURL(blob);
                imageURL = url;
                const img = document.createElement('img');
                img.src = url;
                document.body.appendChild(img);
        })
        .catch();
    }
   function downloadFile(){
    var a = document.createElement('a'); //<a></a>
        a.href = imageURL;
        a.download = 'naciasv.png';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
   }
</script>
</body>
</html>