如何保存 HTML5 画布标记和画布中加载的图像？答案

【问题标题】：How can I save both the HTML5 canvas marks AND the image loaded in the canvas?如何保存 HTML5 画布标记和画布中加载的图像？
【发布时间】：2015-03-26 22:30:58
【问题描述】：

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

我想稍后重新加载图像和标记。如果我不能将两者都保存在一个 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);

        }

【问题讨论】：

标签： html canvas

【解决方案1】：

好的，我想通了。我先加载背景图像，然后在画布上绘制现有标记（在 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();***
                }                    
            }
        }
    }

【讨论】：