Write a script that converts a color image to black and white and to sepia, and
ID: 3559444 • Letter: W
Question
Write a script that converts a color image to black and white and to sepia, and draws all three images -- the original, the black and white, and the sepia - to the canvas. (my code is attached but I can't get the colors right)
<html>
<head>
<title> Image Manipulation </title>
<style>
label { display; inline-block; width: 3em; }
canvas { border: 1px solid black; }
input[type=range] { width: 800px; }
.auto-style1 { text-align: center;}
.auto-style2 { font-size: medium; }
</style>
<script>
var context;
var image = new Image();
image.src = "BlueGreen2.png";
function start()
{
var canvas = document.getElementById( "thecanvas" );
context = canvas.getContext ("2d")
context.drawImage(image, 0, 0);
context.drawImage(image, 200, 0);
context.drawImage(image, 400, 0);
processSephia();
processBlackWhite();
}
function Sephia()
{
context.drawImage(image, 200, 0);
var imageData = context.getImageData(0,0,0,0);
var pixels = imageData.data;
for (var i=0; i<pixels.length; i+=4)
{
var avg = 0.3 * r + 0.59 * g + 0.11 * b;
return [avg + 100, avg + 50, avg, 255];
}
context.putImageData(imageData, 200, 0);
}
function processBlackWhite()
{
context.drawImage(image, 400, 0);
var imageData = context.getImageData(0,0,200, 200);
var pixels = imageData.data;
for (var i=0; i<pixels.length; i+=4)
{
var avg = 0.3 * r + 0.59 * g + 0.11 * b;
return [avg, avg, avg, 255];
}
context.putImageData(imageData, 400, 0);
}
window.addEventListener ("load", start, false);
</script>
</head>
<body>
<div class="auto-style1">
<a href="index.html"><span class="auto-style2"><strong>Lenora's Home Page</strong></span>
</a><strong><br class="auto-style2"><br class="auto-style2"></strong>
<span class="auto-style2"><strong>Page 506</strong></span><strong><br class="auto-style2">
<br class="auto-style2"></strong><span class="auto-style2"><strong>14.12
Image Manipulation</strong></span><strong><br class="auto-style2">
<br class="auto-style2"></strong><br>
<canvas id = "thecanvas" width = "600" height="150" > </canvas>
</div>
</body>
</html>
Explanation / Answer
Edited answer check this and rate
<html>
<head>
<title> Image Manipulation </title>
<style>
label { display: inline-block; width: 3em; }
canvas { border: 1px solid black; }
input[type=range] { width: 800px; }
.auto-style1 { text-align: center;}
.auto-style2 { font-size: medium; }
</style>
<script>
var context;
var image = new Image();
image.src = "BlueGreen2.png";
var context;
function start()
{
context= document.getElementById( "thecanvas" ).getContext("2d");
context.drawImage(image, 0, 0);
context.drawImage(image, 200, 0);
context.drawImage(image, 400, 0);
Sephia();
processBlackWhite();
}
function Sephia()
{
var imageData = context.getImageData(0,0,200,150);
var pixels = imageData.data;
alert(imageData.data[0]+" "+imageData.data[1]+" "+imageData.data[2]);
for (var i=0;i<imageData.data.length;i+=4)
{
var avg = 0.3 * imageData.data[i] + 0.59 * imageData.data[i+1] + 0.11 * imageData.data[i+2];
imageData.data[i]=avg + 100;
imageData.data[i+1]=avg + 50;
imageData.data[i+2]=avg;
imageData.data[i+3]=255;
}
context.putImageData(imageData, 200, 0);
}
function processBlackWhite()
{
var imageData = context.getImageData(0,0,200,150);
var pixels = imageData.data;
for (var i=0;i<imageData.data.length;i+=4)
{
var avg = 0.3 * imageData.data[i] + 0.59 * imageData.data[i+1] + 0.11 * imageData.data[i+2];
imageData.data[i]=avg;
imageData.data[i+1]=avg;
imageData.data[i+2]=avg;
imageData.data[i+3]=255;
}
context.putImageData(imageData, 400, 0);
}
window.addEventListener ("load", start, false);
</script>
</head>
<body >
<div class="auto-style1">
<a href="index.html"><span class="auto-style2"><strong>Lenora's Home Page</strong></span>
</a><strong><br class="auto-style2"><br class="auto-style2"></strong>
<span class="auto-style2"><strong>Page 506</strong></span><strong><br class="auto-style2">
<br class="auto-style2"></strong><span class="auto-style2"><strong>14.12
Image Manipulation</strong></span><strong><br class="auto-style2">
<br class="auto-style2"></strong><br>
<canvas id = "thecanvas" width = "600" height="150" > </canvas>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.