Question

我想将画布保存到项目的文件夹“上传”中，因此尝试将其转换为图像，然后将其发送到后面的代码中并保存。但是它获得的整个网页截图不只是画布。

这是我的JavaScript代码：

html2canvas(document.body, {onrendered: function (canvas) {
var mergedImage = canvas.toDataURL("image/png");
mergedImage = mergedImage.replace('data:image/png;base64,', '');
var param = { imageData: mergedImage };
$http({
        method: 'POST',
        url: '/Admin/MyController/UploadImage',
        data: JSON.stringify(param),
        dataType: 'JSON',
        headers: { 'content-type': 'application/json' }
     }).then(function (response) {
 alert('Your photos successfully uploaded!');
});
}
});

这是我在mvc控件文件中的c＃代码：

[HttpPost]
        public ContentResult UploadImage(string imageData)
        {
            try
            {
                string fileNameWithPath = Server.MapPath("~/Images/SomeFolder/custom_name.png");
                if (!Directory.Exists(fileNameWithPath))
                {
                    using (FileStream fs = new FileStream(fileNameWithPath, FileMode.Create))
                    {
                        using (BinaryWriter bw = new BinaryWriter(fs))
                        {
                            byte[] data = Convert.FromBase64String(imageData);
                            bw.Write(data);
                            bw.Close();
                        }
                    }
                }
            }
            catch (Exception ex)
            {

            }

            return Content("Uploaded");
        }

我只需要将画布保存到我项目的文件夹中即可。

Answer 1

似乎您正在获取屏幕截图，因此您的控制器必须工作正常。但是，看着https://html2canvas.hertzen.com/，我看到了：

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

和：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

预期结果是对#capture元素内部的内容进行屏幕截图。因此，他们使用html2canvas(document.querySelector(" #capture ")).then()来做到这一点。

您说的是获取整个网页，而不仅仅是画布。但考虑到您编写的是以下内容，我认为这是预期的行为：html2canvas( document.body , ...)，在其中您要求提供 body 的屏幕截图元件。使用 html2canvas ，您应将document.body替换为画布的ID。

但是，您可能不需要这样做。您可以简单地获取画布的图像数据并将其保存。为此，您可以使用：const dataURL = canvas.toDataURL();，或者如果需要其他功能：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

它可能也有帮助：https://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

如何使用javascript和mvc将画布上传到项目的文件夹

1 个答案: