Comment faire une bordure pour une image avec une fonction en JavaScript

Question

Je veux prendre une image et faire une fonction addborder(y) en JavaScript pour que l'image ait une bordure jaune. Le but est de voir comment faire des choses à une image en utilisant 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

En général, vous voulez simplement utiliser la .style property pour modifier le CSS directement par JavaScript; vous n'avez pas besoin d'utiliser une fonction complexe qui manipule les pixels eux-mêmes.

Dans l'exemple suivant, je montre la création d'une simple bordure en utilisant .style.border:

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

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

Hope this helps! :)