Image 无法从Html 5画布生成png图像

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

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

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

现在我想将此图像保存在HDD上，为此，我形成了以下请求：

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#）：

但是在服务器端生成的图像与在Html5画布上绘制的图像完全不同

我在这里做错了什么..

escape（canvas.toDataURL（“image/png”））

我认为这应该是一个组件，而不是逃避

encodeURIComponent使用HTTP协议，而escape只编码非ASCII字符。如果使用HTTP协议，请不要使用escape。

escape（canvas.toDataURL（“image/png”））

canvas.toDataURL("image/png")

我认为这应该是一个组件，而不是逃避

encodeURIComponent使用HTTP协议，而escape只编码非ASCII字符。如果使用HTTP协议，请不要使用escape

canvas.toDataURL("image/png")

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

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

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

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

如果您只对base64编码图像感兴趣，请按如下方式提取它：

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

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

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

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

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

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

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

如果您只对base64编码图像感兴趣，请按如下方式提取它：

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

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

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

也阅读评论，可能必须删除数据：图像。。。如user375025所述。假设你在一段时间前就发现了这一点，那就为其他人着想。

---

也阅读评论，可能必须删除数据：图像。。。如user375025所述。假设你不久前就明白了这一点，那么就把它放在其他人身上。

它只是一个透明的图像，里面什么都没有。。事实上，我在这段代码中附加了这个图像。就在问题的最后一行之前，有一个图像是通过这个程序生成的。嗨，我面临着同样的问题，你有没有解决它？它只是一个透明的图像，没有任何内容。。事实上，我在这段代码中附加了这个图像。就在最后一行问题之前，有一个图像是通过这个程序生成的。嗨，我面临着同样的问题，你有没有解决它？