ImageScript/example/index.html at browser · matmen/ImageScript

26 lines (23 loc) · 1001 Bytes

<html lang="en">
<head>
    <title>ImageScript Example</title>
</head>
<body>
<h1>ImageScript example</h1>
<p>Simple example showing integration of ImageScript into an application (load image, modify, encode, convert to blob,
    display)</p>
<p>You can find more examples on <a href="https://github.com/matmen/ImageScript/tree/master/tests">GitHub</a></p>
<img alt="ImageScript Example Result" id="image" src="https://via.placeholder.com/100x100">
<script src="https://cdn.jsdelivr.net/gh/matmen/imagescript@browser/browser/ImageScript.js"></script>
<script>
	(async () => {
		const avatar = await fetch('https://raw.githubusercontent.com/matmen/ImageScript/master/tests/targets/readme.png').then(r => r.arrayBuffer());
		const image = await ImageScript.Image.decode(avatar);

		image.saturation(0);

		const encoded = await image.encode();

		const blob = new Blob([encoded], {type: 'image/png'});
		document.querySelector('#image').src = URL.createObjectURL(blob);
	})();
</script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expand file tree

Search code, repositories, users, issues, pull requests...

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls

Expand file tree