javascript - 从编码的 Base64 Canvas 下载图像会出现 maxUrlLength 值错误

Question

我的网页上有一个 Canvas 绘图，它使用 javascript 在其上创建了一个 base64 图像格式。然后我对图像的 URL 进行编码，这样我就有了图像的编码 URL。我还在这里读过一篇文章，他们说如果您对编码字符串执行 window.location.href ，则可以下载图像。我已经尝试了 window.location.href = img 和 windows.open(img, 'download') 选项，您可以在评论中看到它们，但我收到错误请帮助。我只需要将 Canvas 绘图作为图像下载到服务器即可。

帖子:Download image which is src attribute (base64)

错误:此请求的 URL 长度超出了配置的 maxUrlLength 值。

<script type="text/javascript">
function loaded() {
    var signature = new ns.SignatureControl({ containerId: 'container', callback: function () {
    }
    });
    signature.init();
}
window.addEventListener('DOMContentLoaded', loaded, false);
function to_image() {
    var canvas = document.getElementById("signatureCanvas");
    document.getElementById("theimage").src = canvas.toDataURL();
    var pngData = canvas.toDataURL("image/png");
    var img = base64_encode(canvas.toDataURL("image/png"))
    //window.location.href = img
    //window.open(img, 'download');
}
function base64_encode(data) {
    // http://kevin.vanzonneveld.net
    // +   original by: Tyler Akins (http://rumkin.com)
    // +   improved by: Bayron Guevara
    // +   improved by: Thunder.m
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Pellentesque Malesuada
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Rafał Kukawski (http://kukawski.pl)
    // *     example 1: base64_encode('Kevin van Zonneveld');
    // *     returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
    // mozilla has this native
    // - but breaks in 2.0.0.12!
    //if (typeof this.window['btoa'] == 'function') {
    //    return btoa(data);
    //}
    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
ac = 0,
enc = "",
tmp_arr = [];

    if (!data) {
        return data;
    }

    do { // pack three octets into four hexets
        o1 = data.charCodeAt(i++);
        o2 = data.charCodeAt(i++);
        o3 = data.charCodeAt(i++);

        bits = o1 << 16 | o2 << 8 | o3;

        h1 = bits >> 18 & 0x3f;
        h2 = bits >> 12 & 0x3f;
        h3 = bits >> 6 & 0x3f;
        h4 = bits & 0x3f;

        // use hexets to index into b64, and append result to encoded string
        tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
    } while (i < data.length);

    enc = tmp_arr.join('');

    var r = data.length % 3;

    return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);

}

很好的编辑和 tanx 答案

Answer 1

在将图像数据分配给 window.location.href 属性之前，您需要为图像数据添加前缀，如下所示。

window.location.href = 'data:image/png;base64,id23gas2fo....