Question

我有一张画布，我将图片加载到其中。然后，用户在画布上以加载的图像作为背景制作标记。当我尝试保存图像（使用toDataURL（））和用户做出的标记时，它只保存标记，但不保存＆＃34;背景＆＃34;我加载到画布中的图像。我可以一次性保存吗？

我想稍后重新加载图片和标记。如果我不能将它们保存在一个Base64字符串中，那么即使可能，我也必须进行某种图像叠加。最好保存它。

下面是加载图像并保存标记的代码。我并不认为制作标记代码是相关的，所以我留下了详细信息。

感谢您的帮助。

＆＃13;

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);

        }

＆＃13;

Answer 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();***
                }                    
            }
        }
    }

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

1 个答案: