Javascript 创建一个函数，在图像周围添加黑色边框

我正在上一门课，我们应该做一个函数，为图像添加边框。我首先制作了一个程序（在代码的底部注释掉），它在图像周围创建了一个10像素的边框，正如我所期望的那样。我将代码转移到函数中，现在它有一个bug。我用函数addBorder中的参数（borderWidth）替换了10，出于某种原因，该函数只将边框放置在图像的顶部和左侧，而不是四周。我假设错误在if语句中，但我找不到它，也不理解它为什么作为程序而不是函数工作

//create a function to change a single pixel to black
function setBlack(pixel){
    pixel.setRed(0);
    pixel.setGreen(0);
    pixel.setBlue(0);
    return false;
}
//create a function to add a black border around an image 

function addBorder(pixel, image, borderWidth){
    var x = pixel.getX();
    var y = pixel.getY();
    if(x <= img.getWidth() + borderWidth - img.getWidth() || x >= img.getWidth - borderWidth){
        return pixel;
    }
    if(y <= img.getHeight() + borderWidth - img.getHeight() || y >= img.getHeight - borderWidth){
        return pixel;
    }
    return false;
}

var img = new SimpleImage("palm-and-beach.png");
img.setSize(200, 200);

for(pixel of img.values()){
    if(addBorder(pixel, img, 10)){
        setBlack(pixel);
    }
}
print(img);

//创建一个函数，将单个像素更改为黑色
功能（像素）{
像素。设置为红色（0）；
像素设置为绿色（0）；
像素设置值（0）；
返回false；
}
//创建一个函数，在图像周围添加黑色边框
函数addBorder（像素、图像、边框宽度）{
var x=pixel.getX（）；
var y=pixel.getY（）；
if（x=img.getWidth-borderWidth）{
返回像素；
}
if（y=img.getHeight-borderWidth）{
返回像素；
}
返回false；
}
var img=新SimpleImage（“palm and beach.png”）；
img.设置尺寸（200200）；
对于（img.values（）的像素）{
if（添加边框（像素、img、10））{
像素级；
}
}
打印（img）；

从您的代码判断，似乎您正在将“img”传递给addBorder：

if(addBorder(pixel, img, 10)){
        setBlack(pixel);
    } 

但函数中的参数为“image”，您正在函数中修改img：

function addBorder(pixel, image, borderWidth){
    ...
    if(x <= img.getWidth() + borderWidth - img.getWidth())
    ...
    }

函数addBorder（像素、图像、边框宽度）{
...
如果（x您忘记在函数reference
img.getWidth（）之后加上（）

您正在做一个练习，但要让您知道有一种更快（CPU时间）的方法来添加边框

function addBorder(image, borderStyle, borderWidth){
     // create new image
     var bImage = document.createElement("canvas");
     // set size to include border
     bImage.width = image.width + borderWidth * 2;
     bImage.height = image.height + borderWidth * 2;
     var ctx = bImage.getContext("2d");
     ctx.fillStyle = borderStyle;
     // fill it with border colour
     ctx.fillRect(0, 0, bImage.width, bImage.height);
     // draw the image 
     ctx.drawImage(image, borderWidth, borderWidth);
     return bImage; // done
 }

在哪里定义了
SimpleImage
？Torazaburo，SimpleImage是在“Duke learn to program”库中定义的。他们还为类的javascript部分使用自己的编辑环境。我们可以在一个框中编写代码，运行代码，并将其解释为在另一个框中输出。对于类的html/css部分，我们使用codep嗯，这是一个实时编辑器，如果你没有听说过的话。它们非常有用！即使存在不一致的引用对象引用
img
被函数
addBoarder
关闭。在这种情况下，将对identifier的引用更改为
image
没有效果。Blindman67，我同意函数关闭图像参考。当我创建函数和程序时，我很好奇，尝试了这两种方法，并且都解释得很好。正如你所说，我理解了，被函数关闭，然后指向何时使用img变量调用addBorder。对吗？或者，img被放在图像框中（内存中的地址）？如果你想的是一个较低层次的抽象…是吗？Blindman67，是的，谢谢！我一直在看每一行，但我就是看不到。另外，很抱歉，注释掉的部分-我以前写的程序-被删除了。我把它放在那里，但在我输入问题和发布之间的某个地方，它被删除了。我试过你r关于冗余的建议，但它返回了一张完全黑色的照片。感谢您花时间查看它！@Nibble0xA我刚刚注意到另一个问题，您
返回像素
在边界像素处，您应该返回
假
（我将更新答案）。我不知道为什么图像是黑色的，因为逻辑是合理的，但我不熟悉该库，所以只能猜测。顺便说一句，有一种更简单的方法可以将Board添加到图像中。我会将其添加到更新我在下面发布了此更新，但我没有正确填写您的姓名。我同意函数关闭图像引用。当我将函数设置为d程序我很好奇，尝试了这两种方法，两种方法都得到了正确的解释。我理解了你所说的，被函数关闭，然后，我假设，当使用img变量调用addBorder时，指向了。对吗？或者，img被放在图像框中（内存中的地址），如果您考虑的是较低级别的抽象……我是否正确理解了语义？@Nibble0xA在这种情况下，您可以将其视为img仍在函数中的作用域内。Javascript闭包很难用几句话来解释，它不仅仅是在作用域内，被闭包的变量会获得它们所持有的引用的新副本，并且它的寿命与函数上下文的长度相当。最好查找它，而不是试图理解我无效地试图说的内容。我曾想知道如何使用fgimg和bgimg。我们班的一部分正在研究“绿屏问题”，其中我们同时使用这些和另一个输出图像。我很好奇，我看到了您对返回的推理，但我想进一步了解。它是否返回false；因为if语句只传递一次，因此在for循环调用时，每次迭代都必须终止？
function addBorder(pixel, image, borderWidth){
    var x = pixel.getX();
    var y = pixel.getY();
    var w = image.getWidth();
    var h = image.getHeight();
    if(x <= borderWidth || x >= w  - borderWidth){
        return true;
    }
    if(y <= borderWidth || y >= h - borderWidth){
        return true;
    }
    return false;
}

function addBorder(image, borderStyle, borderWidth){
     // create new image
     var bImage = document.createElement("canvas");
     // set size to include border
     bImage.width = image.width + borderWidth * 2;
     bImage.height = image.height + borderWidth * 2;
     var ctx = bImage.getContext("2d");
     ctx.fillStyle = borderStyle;
     // fill it with border colour
     ctx.fillRect(0, 0, bImage.width, bImage.height);
     // draw the image 
     ctx.drawImage(image, borderWidth, borderWidth);
     return bImage; // done
 }