Muhammad Rifqi: February 2024

Wednesday, February 21, 2024

Preview Canvas from Image

1. HTML

<!DOCTYPE html>
<html>

<head>
    <title>Hello HTML</title>
</head>

<body>
    <h3> Halo dunia HTML</h3>
    <hr>
    <img src="https://cdn.pixabay.com/photo/2022/01/28/18/32/leaves-6975462_1280.png" width="200"
        crossorigin="anonymous" />
    <hr>
    <span id="new_img"></span>
</body>
<script type="module" src="./js/main.js"></script>

</html>

2. Javascript

const image = document.querySelector("img");
const width = image.offsetWidth
const height = image.offsetHeight;
image.getAttribute('src');

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, width, height);
let base64 = canvas.toDataURL('image/jpeg');

console.log(base64)

TITLE CASE VANILLA JS

Saturday, February 17, 2024

Split UpperCase Javascript

function solution(string) {

let splitStr = string.split("");

let newStr = string.split("");

let capStr = string.toUpperCase().split("");

console.log(capStr);

for (i = splitStr.length - 1; i >= 0; i--) {

if (splitStr[i] === capStr[i]) {

newStr.splice(i, 0, ' ');

}

return newStr.join("");

}

console.log('camelCasing: ', solution('camelCasing'));

console.log('camelCasingTest: ', solution('camelCasingTest'));

</script>

Saturday, February 10, 2024

Upload Video And ( Resize & Thumbnail ) With FFMPEG For Windows

1. DB ffmpeg

2. Install FFMEPG

=> https://phoenixnap.com/kb/ffmpeg-windows

3 . Source Code : https://github.com/muhammad-rifqi/upload_video_ffmpeg_php.git

Friday, February 9, 2024

Api Map Reference

1. https://nominatim.org/release-docs/3.4/api/Search/

2. https://nominatim.openstreetmap.org/?addressdetails=1&q=bakery+in+berlin+wedding&format=json&limit=1

3. https://nominatim.openstreetmap.org/search?q=ragamukti&format=geojson

4. https://nominatim.org/release-docs/latest/api/Lookup/#examples

Example Code:

<!DOCTYPE html>

<head>

integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />

integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

<style>

#map {

height: 350px

}

</style>

</head>

<body>

</body>

const map = L.map('map');

// Initializes map

map.setView([51.505, -0.09], 13);

// Sets initial coordinates and zoom level

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {

maxZoom: 19,

}).addTo(map);

// Sets map data source and associates with map

let marker, circle, zoomed;

navigator.geolocation.watchPosition(success, error);

function success(pos) {

const lat = pos.coords.latitude;

const lng = pos.coords.longitude;

const accuracy = pos.coords.accuracy;

if (marker) {

map.removeLayer(marker);

map.removeLayer(circle);

}

// Removes any existing marker and circule (new ones about to be set)

marker = L.marker([lat, lng]).addTo(map);

circle = L.circle([lat, lng], { radius: accuracy }).addTo(map);

// Adds marker to the map and a circle for accuracy

if (!zoomed) {

zoomed = map.fitBounds(circle.getBounds());

}

// Set zoom to boundaries of accuracy circle

map.setView([lat, lng]);

// Set map focus to current user position

}

function error(error) {

console.log(error)

}

</script>

</html>

Muhammad Rifqi