Question

我正在使用ip camera。

直播：

<img id="ip-camera-frame" src="http://192.168.1.10/GetData.cgi?CH=1"></img>

我从相机链接“/GetImage.cgi?CH=0”拍摄快照，我可以在modalbox中设置“img”标签。

此快照没问题，我想下载捕获的图像，但所有下载的methots都会获得新的捕获和下载。

<div id="snapshot" class="modal-demo">
<div class="custom-modal-text">
    <img id="snapshot-frame" width="100%"></img >
</div>
<div class="modal-footer">
    <button type="button" id="save-snapshot">Download Snapshot</button>
</div>

Answer 1

您可以尝试从已加载和显示的图像中复制图像数据。正如它在这里描述的那样：

Get image data in JavaScript?

并按照此处所述下载：

Browser/HTML Force download of image from src="data:image/jpeg;base64..."

所以你应该有类似的东西：

document.getElementById('save-snapshot').addEventListener("click", function(e) {



var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function() {
var   canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);
    // guess the original format, maybe "image/jpg"
    var dataURL = canvas.toDataURL("image/png");

    window.open(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
};
img.src = document.getElementById("ip-camera-frame").src;

}, false);

jQuery，捕获图像下载

1 个答案: