[英]javascript change image onclick
Is it possible to change a part of a photo? 是否可以更改照片的一部分? I do not know how to do this - when I click on the white ball part of the lamp changes.
我不知道该怎么做-当我单击白球时,灯泡的一部分会改变。 For now I did something like that http://mantykora.cleoni.com/~newsletter/2017/gabi/2017_Gabi_2.html
现在我做了类似的事情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>
UPDATE 1 - 2017-06-28 更新1-2017-06-28
I have made separate photos but I do not know how to connect Fabric.js plugin with javascript onclick - http://mantykora.cleoni.com/~newsletter/2017/gabi/html/index_2.html# 我做了单独的照片,但我不知道如何连接Fabric.js插件使用javascript的onclick - http://mantykora.cleoni.com/~newsletter/2017/gabi/html/index_2.html#
You can use fabric.js plugin for updating the partly image. 您可以使用fabric.js插件来更新部分图像。 Here are the steps that you need to do for updating partly images
这是部分更新图像所需的步骤
Here are the Demo Links for your references 这是演示链接供您参考
http://fabricjs.com/fabric-intro-part-1#images http://fabricjs.com/fabric-intro-part-1#images
I have updated code below. 我在下面更新了代码。 I have added updateImage function for updating image while click on images .
我添加了updateImage函数,用于在单击图像时更新图像。 Just you need to pass image
只需要传递图像
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"> </td> </tr> </tbody> </table></td> </tr> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.