ImageProcessing100Wen/Tutorial/sample.html at master · csdingithub/ImageProcessing100Wen

47 lines (35 loc) · 1.34 KB

<!DOCTYPE html>

<html>

<head>

<title>Image Processing</title>

</head>

<body>

<h1>Image Processing!</h1>

<br>

<button onclick="process();" style="margin-left: 90px; font-size: 20px;">process!</button>

let image = new Image();

var src = "imori.jpg";

image.src = src;

const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");

const canvas_result = document.getElementById("canvas_result");

const ctx_result = canvas_result.getContext("2d");

image.onload = () => {

canvas.width = image.width;

canvas.height = image.height;

ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

canvas_result.width = image.width;

canvas_result.height = image.height;

}

function process(){

let src = ctx.getImageData(0, 0, image.width, image.height);

let dst = ctx_result.createImageData(image.width, image.height);

ctx_result.putImageData(src, 0, 0);

}

</script>

</body>

</html>

Provide feedback