javascript更改图片onclick

Question

是否可以更改照片的一部分？ 我不知道该怎么做-当我单击白球时，灯泡的一部分会改变。 现在我做了类似的事情http://mantykora.cleoni.com/~newsletter/2017/gabi/2017_Gabi_2.html

<script>
function pictureChange()
{
document.getElementById("theImage").src="gold.jpg";
}


function pictureChange2()
{
document.getElementById("theImage").src="miedz.jpg";
}


function pictureChange3()
{
document.getElementById("theImage").src="stal.jpg";
}

function pictureChange4()
{
document.getElementById("theImage").src="816_Gabi_white.png";
}
</script>

<td align="center" valign="middle"><a href="#" onClick="pictureChange()"><img src="816_Gabi_kolory_GOLD.jpg" width="200" height="200" alt=""/></a></td>
<td align="center" valign="middle"><a href="#" onClick="pictureChange2()"><img src="816_Gabi_kolory_MIEDZ.jpg" width="200" height="200" alt=""/></a></td>
<td align="center" valign="middle"><a href="#" onClick="pictureChange3()"><img src="816_Gabi_kolory_STAL.jpg" width="200" height="200" alt=""/></a></td>

更新1-2017-06-28

我做了单独的照片，但我不知道如何连接Fabric.js插件使用javascript的onclick - http://mantykora.cleoni.com/~newsletter/2017/gabi/html/index_2.html#

Answer 1

您可以使用fabric.js插件来更新部分图像。 这是部分更新图像所需的步骤

1. 添加Fabric.js插件
2. 使用结构方法创建画布。 有关相同的http://fabricjs.com/fabric-intro-part-1#canvas，请参阅此文档
3. 添加顶部图像和底部图像与在示例图像下方添加的图像相同。 请参阅http://fabricjs.com/fabric-intro-part-1#images
4. 用户单击“颜色矛”后，您需要根据所选对象更新图像。

这是演示链接供您参考

http://fabricjs.com/fabric-intro-part-1#images

我在下面更新了代码。 我添加了updateImage函数，用于在单击图像时更新图像。 只需要传递图像

 var canvas = this.__canvas = new fabric.StaticCanvas('c'); fabric.Image.fromURL('Gold_001A.png', function(img) { canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage2' }).scale(1)); }); fabric.Image.fromURL('Gold_001B.png', function(img) { canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage' }).scale(1)); }); /* Funtion for updating image @param {string}{imageName} Image name or image url for loading and updating */ function updateImage(imageName){ fabric.Image.fromURL(imageName, function(img) { var object= getImageObjectUsingId('theImage'); canvas.remove(object); canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage' }).scale(1)); }); } /* Function for getting perticular object for updating the images @param {String}{id} Object Id for selecting object . Same as use while creating object */ function getImageObjectUsingId(id){ var listOfObjects= canvas.getObjects(); for(var i=0; i< listOfObjects.length; i++){ if(listOfObjects[i].id==id){ return listOfObjects[i]; } } } 

 <table width="100%" border="0"> <tbody> <tr> <td align="center" valign="middle"><table width="600" border="0"> <tbody> <tr> <td align="center" valign="middle"><canvas id="c" width="800" height="800" class="lower-canvas" style="width: 800px; height: 800px;"></canvas> </td> </tr> <tr> <td align="center" valign="middle"><table width="600" border="0"> <tbody> <tr> <!--update image for updating image using updateImage function and pass iamge name or url in that funtion--> <td align="center" valign="middle"><a href="#" onclick="updateImage('816_Gabi_white.png')"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_GOLD.jpg" width="200" height="200" alt=""></a></td> <td align="center" valign="middle"><a href="#" onclick="updateImage('816_Gabi_kolory_MIEDZ.jpg')"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_MIEDZ.jpg" width="200" height="200" alt=""></a></td> <td align="center" valign="middle"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_STAL.jpg" width="200" height="200" alt=""></td> </tr> </tbody> </table></td> </tr> <tr> <td align="center" valign="middle">&nbsp;</td> </tr> </tbody> </table></td> </tr> </tbody> </table>