Question

我正在开展与图像处理相关的项目。目前，我正在从网络摄像头拍摄图像并将其保存在某个文件夹中。然后我将该图像显示为div上的背景图像。这很好用。但是当我再次拍摄图像时，背景图像仍然保持不变。但是当我在文件夹中看到图像时，它已经改变了。

注意：两个图像都以相同名称保存。因此，之前的图像只是被当前图像所取代。然后单击按钮拍摄图像。

html代码：

 <button id = "click" onclick = "mooddetect()">MOODY</button>
     function mooddetect() {
            $.ajax({
            url: '/mooddetect/',
            type:"POST",
            cache:false,
            success: function(input) {
                var x = document.getElementById('photo');
                x.style.backgroundImage = "url('/static/detect/test.jpg')";
            },
            failure: function(data) { 
                alert('Got an error dude');
            }
        }); 
        }

views.py：

def get_image(camera):
    retval, im = camera.read()
    return im

def webcam():
    camera_port = 0
    ramp_frames = 30
    camera = cv2.VideoCapture(camera_port)
    for i in xrange(ramp_frames):
        temp = get_image(camera)
    print("Taking image...")
    camera_capture = get_image(camera)
    file = "./music/static/detect/test.jpg"
    cv2.imwrite(file, camera_capture)
    del(camera)
@csrf_exempt
def mooddetect(request):
    webcam()
    return HttpResponse("success")

Answer 1

更新2 - 查看此问题以获取更多信息以及实现这一目标的更好方法：Refresh image with a new one at the same url

更新：有什么帮助是使用新名称保存图像并将更新的URL发送到前面，因为我认为它与缓存有关，但我不确定为什么添加?c=rand没有帮助。

我认为它将与浏览器的缓存有关。

尝试将时间戳或其他兰特数添加到图片网址，这样您每次都会强制加载新图片。

x.style.backgroundImage = "url('/static/detect/test.jpg?c=|some random number|')";

您可以阅读更多内容：how to clear or replace a cached image

Answer 2

尝试此操作清除缓存：

x.style.backgroundImage = `url('/static/detect/test.jpg?${Date.now()}')`

背景图片不会改变javascript

2 个答案: