Невозможно сгенерировать png изображение из HTML 5 Canvas

Question

Я нарисовал градиентное изображение с помощью кривой Безье на холсте HTML 5 следующим образом:

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

Теперь я хочу сохранить это изображение на жестком диске, для этого я сформировал запрос:1004 *

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 .

Что я здесь не так делаю ..

Answer 1

canvas.toDataURL("image/png")

возвращает строку в кодировке base64 с префиксом данных uri, поэтому похоже, что вы кодируете ее дважды.Строка, возвращаемая из canvas.toDataURL, будет выглядеть примерно так:

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

Если вас интересует только изображение в кодировке base64, извлеките его так:

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

Answer 2

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

Читайте комментарии тоже, возможно, придется извлечь данные: изображение ... как указано пользователем 375025. Предполагая, что вы поняли это некоторое время назад, положив для других.

Answer 3

побег (canvas.toDataURL ( "изображение / PNG"))

Я думаю, что он должен быть encodeURIComponent вместо escape.

encodeURIComponent работает с протоколом HTTP, в то время как escape просто кодирует символы не ASCII Не используйте escape, если вы работаете с протоколом HTTP.