如何保存 HTML5 canvas 标记和 canvas 中加载的图像？

Question

我有一个 canvas 可以加载图像。然后，用户使用加载的图像作为背景在 canvas 上做标记。当我尝试保存图像（使用 toDataURL()）和用户所做的标记时，它只保存标记，而不是我加载到 canvas 中的 "background" 图像。我可以一次保存两个吗？

我想稍后重新加载图像和标记。如果我不能将两者都保存在一个 Base64 字符串中，那么如果可能的话，我将不得不做某种图像叠加。最好直接保存。

下面是加载图片和保存标记的代码。我不认为制作标记代码是相关的，所以我省略了细节。

感谢您的帮助。

function SetUp() {

/// load the image
LoadImage();

/// Draw existing marks
DrawMarkedItems();
}


        function LoadImage() {
            var canvas = document.getElementById("imageView");
            if (canvas != null) {
                if (canvas.getContext) {
                    var context = canvas.getContext('2d');
                    var img = new Image();
                    img.onload = function () {
                        context.drawImage(img, 15, 15, 620, 475);
                    }
                    img.src = '../Images/Outline.png';
                }
            }
        }



function DrawMarkedItems() {

var canvas = document.getElementById("imageView");
if (canvas != null) {
 if (canvas.getContext) {
  var list = GetInfoList();  
  if (list.length == 0)
   return;

  var pairs = list.split('|').length;
  for (var i = 0; i < pairs; i++) {

  /// Get the X,Y cooridinates other data 
  /// saved previously in GetInfoList()
  /// and draw the marks back on the 
  /// canvas with image backgroun
  
  }
 }
}
}


        function SaveImage()
        {
            var canvas = document.getElementById("imageView");
            var image = canvas.toDataURL("image/png", 0.1);
            image = image.replace('data:image/png;base64,', '');
                 
            /// WebMethod in code behind
            var retval = PageMethods.SaveImage(image);

        }

Answer 1

好的，我明白了。我首先加载背景图像，然后在 canvas 上绘制现有标记（在 Setup() 中调用 LoadImage()，然后调用 DrawMarkedItems()）。

我将对 DrawMarkedItems() 的调用移到了 LoadImage() 函数中，特别是在 img.onload 函数中。

下面是修改后的函数。希望这对其他人有帮助：

function LoadImage() {
        var canvas = document.getElementById("imageView");
        if (canvas != null) {
            if (canvas.getContext) {
                var context = canvas.getContext('2d');
                var img = new Image();
                img.src = '../Images/Outline.png';  //moved up for cosmetics
                img.onload = function () {
                    context.drawImage(img, 15, 15, 620, 475);
                    ***DrawMarkedItems();***
                }                    
            }
        }
    }

如何保存 HTML5 canvas 标记和 canvas 中加载的图像？

How can I save both the HTML5 canvas marks AND the image loaded in the canvas?

html

canvas