保存html5畫布到平板電腦

Question

我目前正在設計一個html5幻燈片註釋產品，它支持所有支持html5畫布的平板電腦+瀏覽器。我有它將我的註釋保存到計算機的畫布上，但不保存到平板電腦本身。

在所有方面，理想的情況是將畫布註釋數據保存爲mysql數據庫中的數據，但我無法使用Ajax。

所以我堅持把註釋的圖像保存到本地機器上的圖像。

這裏是我的代碼來做到這一點（我使用canvas2image）

的window.onload =函數（）{

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的答案可能對您有用。