如何使用 onclick 事件更改织物 js 的叠加图像？答案

【问题标题】：how do i change overlay image of fabric js with onclick event?如何使用 onclick 事件更改织物 js 的叠加图像？
【发布时间】：2016-04-22 17:47:58
【问题描述】：

我是 javascript 新手，所以我需要一些帮助。我正在制作一个网站，人们可以在其中上传图像，客户可以通过单击下一个或上一个来选择他们的框架。问题是我无法更改框架，除此之外一切正常。这是代码

                       <canvas id="canvas" width="500" height="610" style="border:0px solid gray"></canvas>
        <input type="file" id="imgLoader">
        <img src="https://www.wpclipart.com/page_frames/movie/film_frame_page_T.png" id="fg_img" width="500" height="610" style="display: none;">

        <script>
        var canvas = new fabric.Canvas('canvas');
        var up = document.getElementById("fg_img").getAttribute("src");
    canvas.setOverlayImage(up, canvas.renderAll.bind(canvas));

document.getElementById('imgLoader').onchange = function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) { console.log('fdsf');
        var imgObj = new Image();
        imgObj.src = event.target.result;
        imgObj.onload = function () {

            var image = new fabric.Image(imgObj);
            image.set({


            });
            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
            canvas.add(image);


        }

    }
    reader.readAsDataURL(e.target.files[0]);
}
</script>

这是图像更改功能

<script type="text/javascript">
var img_tk="m1";
   function imgChange1(){
    var newImage = document.getElementById('fg_img');


        if (img_tk=="m1"){
                newImage.src="images/7.png";
                img_tk="m2";
            }
        else if (img_tk=="m2"){
                newImage.src="images/4.png";
                img_tk="m3";
            }
        else if (img_tk=="m3"){
                newImage.src="images/6.png";
                img_tk="m4";
            }
        else {
                newImage.src="images/2.png";
                img_tk="m1";
            }
    }

</script>

提前致谢:)

【问题讨论】：

标签： javascript onclick overlay fabricjs

【解决方案1】：

您可能会遇到某种缓存问题，例如：Changing "src" of an "img" html element doesn't refresh it。

在这种情况下，您可以通过在 src 之后添加日期来修复它，如下所示：

newImage.src = "images/7.png?t=" + new Date().getTime();

【讨论】：