Question

我想拍摄一张图片并在JavaScript中创建一个函数addborder(y)，使图片有一个黄色边框。目的是了解如何使用JavaScript对图像进行操作。

<!--HTML-->

<img id="img" src="http://pre01.deviantart.net/3d38/th/pre/f/2012/298/5/a/dubstep_wallpaper_by_theblazia-d5iwj4c.png" alt="boom boom boom" >

<p id="here"></p>

<Script>

var y = document.getElementById("img"); //I think it stores "img" as var y.

function addborder(x) {
  for (var pixel of x.values()) {
    //loop to change "img" border pixels to yellow
    if (
      pixel.getX() < 50 ||
      pixel.getX() > x.getWidth() - 50 ||
      pixel.getY() < 200 ||
      pixel.getY() > x.getHeight() - 50
    ) {
      pixel.setRed(255);
      pixel.setGreen(255);
      pixel.setBlue(255);
    }
  }
  document.getElementById("here").innerHTML = x; //should print in paragraph?

  //do I need a return statement??
}

Answer 1

通常，您只需使用 .style property 直接通过JavaScript更改CSS;你不需要使用一个复杂的函数来操纵像素本身。

在以下示例中，我演示了使用.style.border：

创建简单边框

var image = document.getElementById('img');
image.style.border = 'thick solid #0000FF';

<img id="img" src="http://placehold.it/100">

希望这有帮助！：）

如何使用JavaScript中的函数为图像创建边框

1 个答案: