JavaScriptで関数を使用して画像の境界線を作成する方法

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

通常あなただけのJavaScriptから直接CSSを変更する.style propertyを利用するでしょう。ピクセル自体を操作する複雑な関数を使用する必要はありません。次の例では

、私は.style.borderを使用して単純な境界線を作成するデモンストレーション：

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

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

は、この情報がお役に立てば幸い！ :)