Question

我目前正在设计html5中的幻灯片注释产品，支持所有支持html5画布的平板电脑+浏览器。我将它的注释保存到计算机而不是平板电脑本身。

在所有方面，理想的情况是将画布注释数据保存为mysql数据库中的数据，但我不能使用Ajax。

所以我很难将带注释的图像保存到本地计算机上的图像中。

这是我的代码（我正在使用canvas2image）

window.onload = function（）{

    var bMouseIsDown = false;

    var oCanvas = document.getElementById("drop1");
    var oCtx = oCanvas.getContext("2d");

    var imgData = oCanvas.toDataURL();

    var iWidth = oCanvas.width;
    var iHeight = oCanvas.height;

var img = new Image();

img.src = "Lectures/<?php echo $_REQUEST["ClassID"]; ?>/<?php echo $_REQUEST["CatID"]; ?>/Slide<?php echo $_REQUEST["Slide"]; ?>.png";
img.onload = function() {
    oCtx.drawImage(img, 0, 0)
}


    oCanvas.onmousedown = function(e) {
        bMouseIsDown = true;
        iLastX = e.clientX - 130;
        iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
    }
    oCanvas.onmouseup = function() {
        bMouseIsDown = false;
        iLastX = -1;
        iLastY = -1;
    }
    oCanvas.onmousemove = function(e) {
        if (bMouseIsDown) {
            var iX = e.clientX-130;
            var iY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
            oCtx.moveTo(iLastX, iLastY);
            oCtx.lineTo(iX, iY);
            oCtx.stroke();
            iLastX = iX;
            iLastY = iY;
        }
    }

    function showDownloadText() {
        document.getElementById("buttoncontainer").style.display = "none";
        document.getElementById("textdownload").style.display = "block";
    }

    function hideDownloadText() {
        document.getElementById("buttoncontainer").style.display = "block";
        document.getElementById("textdownload").style.display = "none";
    }

    function convertCanvas(strType) {
        if (strType == "PNG")
            var oImg = Canvas2Image.saveAsPNG(oCanvas, true);
        if (strType == "BMP")
            var oImg = Canvas2Image.saveAsBMP(oCanvas, true);
        if (strType == "JPEG")
            var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);

        if (!oImg) {
            alert("Sorry, this browser is not capable of saving " + strType + " files!");
            return false;
        }

        oImg.id = "canvasimage";

        oImg.style.border = oCanvas.style.border;
        oCanvas.parentNode.replaceChild(oImg, oCanvas);

        showDownloadText();
    }

    function saveCanvas(pCanvas, strType) {
        var bRes = false;
        if (strType == "PNG")
            bRes = Canvas2Image.saveAsPNG(oCanvas);
        if (strType == "BMP")
            bRes = Canvas2Image.saveAsBMP(oCanvas);
        if (strType == "JPEG")
            bRes = Canvas2Image.saveAsJPEG(oCanvas);

        if (!bRes) {
            alert("Sorry, this browser is not capable of saving " + strType + " files!");
            return false;
        }
    }

    document.getElementById("savepngbtn").onclick = function() {
        saveCanvas(oCanvas, "PNG");
    }
    document.getElementById("savebmpbtn").onclick = function() {
        saveCanvas(oCanvas, "BMP");
    }
    document.getElementById("savejpegbtn").onclick = function() {
        saveCanvas(oCanvas, "JPEG");
    }

    document.getElementById("convertpngbtn").onclick = function() {
        convertCanvas("PNG");
    }
    document.getElementById("convertbmpbtn").onclick = function() {
        convertCanvas("BMP");
    }
    document.getElementById("convertjpegbtn").onclick = function() {
        convertCanvas("JPEG");
    }

    document.getElementById("resetbtn").onclick = function() {
        var oImg = document.getElementById("canvasimage");
        oImg.parentNode.replaceChild(oCanvas, oImg);

        hideDownloadText();
    }

}

Answer 1

您是否考虑过使用Javascript创建包含隐藏字段的表单，将数据放入这些字段，然后提交？ this question的答案可能对您有用。

将html5 Canvas保存到平板电脑

1 个答案: