无法从 Html 5 Canvas 生成 png 图像答案

【问题标题】：Unable to Generate png Image from Html 5 Canvas无法从 Html 5 Canvas 生成 png 图像
【发布时间】：2011-06-18 13:30:24
【问题描述】：

我在 HTML 5 Canvas 上绘制了带有贝塞尔曲线的渐变图像，如下所示：

var canvas = $('#canvas1')[0];

    if (canvas.getContext) {
        var context = canvas.getContext('2d');

        var gradient = context.createLinearGradient(0, 0, 0, 100);
        gradient.addColorStop(0, 'rgba(193,193,193,1)');
        gradient.addColorStop(.20, 'rgba(160,160,160,1)');
        gradient.addColorStop(.5, 'rgba(102,102,102,1)');
        gradient.addColorStop(.7, 'rgba(91,91,91,1)');
        gradient.addColorStop(.97, 'rgba(160,160,160,1)');
        gradient.addColorStop(1, 'rgba(193,193,193,1)');
        context.fillStyle = gradient;
        context.fillRect(0, 0, 500, 100);


        var gradient1 = context.createLinearGradient(0, 0, 0, 100);
        gradient1.addColorStop(0, '#a1a1a1');
        gradient1.addColorStop(.5, '#717171');
        gradient1.addColorStop(1, '#a1a1a1');

        context.beginPath();
        context.moveTo(0, 0);
        context.bezierCurveTo(0, 0, 20, 50, 0, 100);
        context.lineWidth = 1;
        //context.strokeStyle = 'black'; // line color
        //context.stroke();
        context.fillStyle = gradient1;
        context.fill();
        context.closePath();
    }

现在我想把这张图片保存在硬盘上，为此我提出了这个请求：

var canvas = $('#canvas1')[0];

    if (canvas.getContext) {
        var context = canvas.getContext('2d');
        $.ajax({
            url: '/Html5/Export',
            type: 'POST',
            data: 'img=' + escape(canvas.toDataURL("image/png")),
            success: function (data) {
                alert('data exported');
            }
        });
    }

在这个服务器端，我写了这段代码（ASP.NET C#）：

[HttpPost]
        public ActionResult Export()
        {
            string img = Request.Params["img"];

            ConvertThis(img);
            return Content("true");
        }

        public void ConvertThis(string ImageText)
        {
            if (ImageText.Length > 0)
            {
                ImageText = ImageText.Substring(ImageText.IndexOf(",") + 1);
                Byte[] bitmapData;
                bitmapData = Convert.FromBase64String(ImageText);

                System.IO.File.WriteAllBytes(@"c:\logs\random.png", bitmapData);
            }
        }

但是服务器端生成的图片和在Html5 Canvas上绘制的图片完全不同。

我在这里做错了什么..

【问题讨论】：

它只是一个透明的图像，里面什么都没有。实际上我已经在这段代码中附加了那个图像。就在最后一行问题之前，有一张通过这个程序生成的图像。
您好，我也遇到了同样的问题，请问您解决了吗？

标签： image html canvas

【解决方案1】：

转义(canvas.toDataURL("image/png"))

我认为应该是 encodeURIComponent 而不是 escape。

encodeURIComponent 适用于 HTTP 协议，而转义只编码非 ASCII 字符。如果您使用的是 HTTP 协议，请不要使用转义。

【讨论】：

【解决方案2】：

canvas.toDataURL("image/png")

返回带有数据 uri 前缀的 base64 编码字符串，因此看起来您正在对其进行两次编码。从“canvas.toDataURL”返回的字符串将如下所示：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...

如果您只对 base64 编码的图像感兴趣，请像这样提取它：

var base64Image = canvas.toDataURL("image/png");
...
data: 'img=' + base64Image.substr(base64Image.indexOf(',')),

【讨论】：

【解决方案3】：

http://www.worldwidewhat.net/2011/06/send-canvas-content-to-server/

也阅读 cmets，可能必须删除数据：图像...如 user375025 所述。假设你前段时间想通了，就为其他人考虑吧。

【讨论】：