保存html5画布到平板电脑

我目前正在设计一个html5幻灯片注释产品，它支持所有支持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(); 
    } 

}

来源

2011-11-03 Dom

您是否考虑过HTML5 File API？ http://stackoverflow.com/questions/6723931/javascript-previews-with-new-filereader-api-and-dataurls-seem-inefficient/6723973#6723973 – pimvdb

为什么不使用'localStorage'？ https://developer.mozilla.org/en/DOM/Storage，这里是一些演示代码http://html5tutorial.net/tutorials/working-with-html5-localstorage.html – Prusse

本地存储问题是这样的一所大学。几个人将使用这些平板电脑，并不总是得到相同的。同样，如果有人要擦拭饼干，一切都会丢失。 – Dom

你有没有考虑使用JavaScript来创建隐藏字段的表格，将数据放入这些字段中，然后提交它？ this question的答案可能对您有用。

来源

2013-12-01 15:03:51 Gargleyark

保存html5画布到平板电脑

回答

相关问题