Javascript 将停车标志的颜色更改为蓝色？_Javascript_Html_Image Processing_Colors

Javascript 将停车标志的颜色更改为蓝色？

javascript html image-processing colors

Javascript 将停车标志的颜色更改为蓝色？,javascript,html,image-processing,colors,Javascript,Html,Image Processing,Colors,我的老师给了我基本的代码，后来我对它做了一些修改（老实说，可能把它弄糟了）。当您单击按钮时，它应该显示第二个图像，并且第二个图像也应该进行颜色转换。我已经尝试了一切，但似乎无法获得第二张图像来显示或更改任何颜色。我会把我们应该放在下面的代码和图像。我们应该改变的颜色是整个停车标志，红色部分是蓝色的 <!DOCTYPE html> <html> <head> <style> body { background-color: #000000; }

我的老师给了我基本的代码，后来我对它做了一些修改（老实说，可能把它弄糟了）。当您单击按钮时，它应该显示第二个图像，并且第二个图像也应该进行颜色转换。我已经尝试了一切，但似乎无法获得第二张图像来显示或更改任何颜色。我会把我们应该放在下面的代码和图像。我们应该改变的颜色是整个停车标志，红色部分是蓝色的

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="849" height="565"></canvas> 

<script>
var img = new Image(); 

img.src = "stop sign.jpg";

var canvas = document.getElementById('canvas'); // id found in the canvas id tag 'canvas'
var ctx = canvas.getContext('2d'); 

img.onload = function() {
ctx.drawImage(img, 0, 0); // execute drawImage statement after image is loaded
}
function convert() 
{
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // I do not know what to put here in order to gather the data of the image that was originally made?
    var data = imageData.data;

    for (var i = 0; i < data.length; i +=4) 
    {
        //# check if RED channel has pixel values in range of 200 to 255
        if( ( data[i+0] >= 200) && ( data[i+0] <= 255 ) ) 
        {
            //if such pixel found in range then change that pixel color to...
            data[i + 2] = data[i + 0];  //use red level as blue level
            data[i + 1] = 0;    //no green 
            data[i + 0] = 0; //no red
        }
    } 

    ctx.putImageData(imageData, 0, 0); // this is supposed to produce a second image right next to the original image, but I cannot seem to get this to function either. This image is also supposed to be manipulated to have the stop sign blue
}

</script>
<p><button onclick="convert()">Change</button></p>
</body>
</html>


身体{
背景色：#000000；
}
var img=新图像（）；
img.src=“stop sign.jpg”；
var canvas=document.getElementById（'canvas'）；//在画布id标记“canvas”中找到id
var ctx=canvas.getContext（'2d'）；
img.onload=函数（）{
drawImage（img，0，0）；//加载映像后执行drawImage语句
}
函数转换（）
{
var imageData=ctx.getImageData（0，0，canvas.width，canvas.height）；//我不知道在这里放置什么来收集最初制作的图像的数据？
var数据=imageData.data；
对于（变量i=0；i如果（（数据[i+0]>=200）和&（数据[i+0]您可以通过以下方式解决您的问题：
function convert() 
{
    var imageData = ctx.getImageData(0,0,849,565);
    var data = imageData.data;

    for (var i = 0; i < data.length; i +=4) 
    {
        //# check if RED channel has pixel values in range of 200 to 255
        if( ( data[i+0] >= 200) && ( data[i+0] <= 255 ) ) 
        {
            //if such pixel found in range then change that pixel color to...
            data[i + 2] = data[i + 0];  //use red level as blue level
            data[i + 1] = 0;    //no green 
            data[i + 0] = 0; //no red
        }
    } 

    ctx.putImageData(imageData, 500, 0);
}

函数转换（）
{
var-imageData=ctx.getImageData（0,0849565）；
var数据=imageData.data；
对于（变量i=0；i如果（（数据[i+0]>=200）和（（数据[i+0]您在画布上遇到问题，原因是
虽然媒体
可以显示来自任何链接的图像/视频，但如果媒体源不是来自您自己的网站（即：您的https服务器），则对于想要“复制”或“编辑”视觉效果的代码来说，这就成了一个问题
从硬盘驱动器，网页可以有（它是Blob格式，但如果需要，也可以使用图像字节的数组）

转换功能检查是否有任何像素的红色值（级别）设置在特定范围内（210及以上），同时蓝色值小于165

您可以使用IF
语句微调颜色公差。尝试编辑红色最小值（从210到现在从220开始）或编辑蓝色。如果在公差/范围检查中添加绿色（例如：IF（（红色>210）&&（蓝色<165）&（绿色<100））
），会发生什么情况


您必须在照片编辑器中检查停车标志的预期R-G-B范围
尝试从以下示例代码中学习：
<!DOCTYPE html>
<html>

<head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> </head>

<body>

<div style="z-index: 1; overflow:hidden; position: absolute; top: 0px; left: 50px">
<p> Choose an Image file...</p>
<input type="file" id="choose_media" accept=".gif, .jpg, .png" />
</div>

<div style="z-index: 1; overflow:hidden; position: absolute; top: 0px; left: 570px">
<p> Apply Image Effect...</p>
<button id="btn_change" >Change Color</button>
</div>

<!-- aTag is container for user-selected image --> 
<div style="z-index: 1; overflow:hidden; position: absolute; top: 100px; left: 50px">
<a id="aTag"> </a>
</div>

<!-- canvas is container for effect's result image --> 
<canvas id="myCanvas" width="500" height="334" style="z-index: 5; overflow:hidden; position: absolute; top: 100px; left: 570px">
</canvas>


<script>

var file; 
var reader;
var tmpElement; //# is reference to aTag for holding image content.
var file_Blob; //# is reference to file BLOB (data of selected file).

//## set canvas width / height values
var img_w = 500; var img_h = 334;

//## temp Color values
var temp_R = 0; var temp_G = 0; var temp_B = 0;

//# define event for button "select file"...
document.getElementById('choose_media').addEventListener('change', onFileSelected, false);

//# define event for button "change effect"...
document.getElementById('btn_change').addEventListener('click', convert, false);

//# define Canvas and its Context
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

canvas.width = img_w; canvas.height = img_h;

function onFileSelected(evt) 
{
    file = evt.target.files[0]; //# access to selected file
    reader = new FileReader();
    reader.readAsDataURL(file); //# load selected file
    
    //# create elements
    reader.onloadend = function(evt) 
    {
        if (evt.target.readyState == FileReader.DONE) 
        {
             //# update file path...
            file_Blob = (window.URL || window.webkitURL).createObjectURL(file);
            
            
            //# remove any other existing elements in "aTag"...
            var container = document.getElementById("aTag");
            container.removeChild(container.childNodes[0]); 
            
            //# create HTML5 image element for "aTag"...
            tmpElement = document.createElement( "img");
            tmpElement.setAttribute("id", "img");
            tmpElement.setAttribute("width", img_w);
            tmpElement.setAttribute("height", img_h);

            //# set "load complete" check then make draw to canvas
            tmpElement.addEventListener("load", () => 
            {
                //alert("img loaded");
                ctx.drawImage(tmpElement, 0, 0, img_w, img_h); //draws rescaled
            });
                        
            //# add newly created HTML5 image into the "aTag" element.
            tmpElement.setAttribute("src", file_Blob);
            container.appendChild(tmpElement);  
        }
    };
}


function convert()
{
    //# is already previously drawn by "load" function (but can do it here)...
    //# tmpElement is the (source container of) user-selected image.
    //ctx.drawImage(tmpElement, 0, 0, 500, 334);
    
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // I do not know what to put here in order to gather the data of the image that was originally made?
    var data = imageData.data;

    for (var i = 0; i < data.length; i +=4) 
    {
        temp_R = data[i + 0];
        
        temp_B = data[i + 2];

        //# condition: Change color whenever... 
        //# if RED channel has a pixel value above 210.
        //# AND if BLUE channel has a pixel value smaller than 165.
        if( ( data[i+0] > 210) && ( data[i+2] < 165 ) ) 
        {
            //if such pixel found in range then change that pixel color to...
            data[i + 0] = temp_B; //# Red = use Blue level as Red level
            //data[i + 1] = data[i + 1]; //# Grn = no edit of Green 
            data[i + 2] = temp_R; //# Blu = use Red level as Blue level
        }
    } 

    ctx.putImageData(imageData, 0, 0);
}

</script>

</body>
</html>


选择一个图像文件
应用图像效果
变色
var文件；
变量读取器；
var tmpElement；//#是对保存图像内容的aTag的引用。
var file_Blob；//#是对文件Blob（所选文件的数据）的引用。
//##设置画布宽度/高度值
var img_w=500；var img_h=334；
//##温度颜色值
var temp_R=0；var temp_G=0；var temp_B=0；
//#为“选择文件”按钮定义事件。。。
document.getElementById（'choose_media'）。addEventListener（'change'，onFileSelected，false）；
//#定义按钮“更改效果”的事件。。。
document.getElementById（'btn_change'）。addEventListener（'click'，convert，false）；
//#定义画布及其上下文
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
canvas.width=img_w；canvas.height=img_h；
函数onFileSelected（evt）
{
file=evt.target.files[0]；//#对所选文件的访问权限
reader=newfilereader（）；
reader.readAsDataURL（文件）；//#加载所选文件
//#创建元素
reader.onloadend=函数（evt）
{
if（evt.target.readyState==FileReader.DONE）
{
//#更新文件路径。。。
文件_Blob=（window.URL | | window.webkitURL）.createObjectURL（文件）；
//#删除“aTag”中的任何其他现有元素。。。
var container=document.getElementById（“aTag”）；
container.removeChild（container.childNodes[0]）；
//#为“aTag”创建HTML5图像元素。。。
tmpElement=document.createElement（“img”）；
setAttribute（“id”、“img”）；
tmpElement.setAttribute（“宽度”，img_w）；
tmplement.setAttribute（“高度”，img_h）；
//#设置“加载完成”复选框，然后绘制画布
tmpElement.addEventListener（“加载”，（）=>
{
//警报（“img加载”）；
ctx.drawImage（tmpElement，0，0，img_w，img_h）；//重新缩放的绘图
});
//#将新创建的HTML5图像添加到“aTag”元素中。
setAttribute（“src”，文件\u Blob）；
容器.附件（tPelement）；
}
};
}
函数转换（）
{
//#之前已由“加载”函数绘制（但可以在此处绘制）。。。
//#tmpElement是用户选择的图像的（源容器）。
//ctx.drawImage（tmpElement，0,0500334）；
var imageData=ctx.getImageData（0，0，canvas.width，canvas.height）；//我不知道在这里放置什么来收集最初制作的图像的数据？
var数据=imageData.data；
对于（变量i=0；i210）和&（数据[i+2]<165））
{
//如果在范围内找到这样的像素，则将该像素颜色更改为。。。
数据[i+0]=温度B；//红色=使用蓝色电平作为红色电平
//数据[i+1]=数据[i+1]；//#Grn=不编辑绿色
数据[i+2]=温度/蓝色