Question

我有一个Canvas和花的多个图像。实际上我正在将花朵安排到花瓶中，在安排之后，我想将花朵和花瓶的排列作为图像捕捉到系统中。实际上我想剪辑并保存画布中可以看到花和花瓶排列的部分

Answer 1

你必须使用html2canvas。单击该按钮触发的以下功能将截取/捕获该部门的内容作为图像，并将显示一个弹出窗口以保存它

JAVASCRIPT

var pt = "wp-content/";
var songs = ["preview", "first_audio", "second_audio", "tree_audio", "other_audio"],
audio = document.getElementById("player");
audio.addEventListener("ended", function() {
    var getAudio = this.getAttribute("data-src"),
        getPos = songs.indexOf(pt + getAudio);
    audio.src = pt + songs[getPos + 1];
    audio.play();
});

HTML

$(function () {
    $("#btnSave").click(function () {

        html2canvas($("#capture"), {
            onrendered: function (canvas) {
                theCanvas = canvas; 
                document.body.appendChild(canvas);//to verify if image is being captured or not
                canvas.toBlob(function (blob) {
                    saveAs(blob, "screenshot.png");
                });
            }
        });
    });
});

如何捕捉画布的screentshot

1 个答案: