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)
No comments:
Post a Comment