从编码的 base64 画布下载图像会给出 maxUrlLength 值错误答案

【问题标题】：Image download from encoded base64 canvas gives maxUrlLength value error从编码的 base64 画布下载图像会给出 maxUrlLength 值错误
【发布时间】：2013-01-07 13:09:12
【问题描述】：

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

发帖：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);

}

很好的编辑和答案

【问题讨论】：

标签： javascript asp.net base64 html5-canvas

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试下一种方式下载：

$('img#imagedownload').attr('src', renderer.domElement.toDataURL("image/png"));
var img = document.getElementById('imagedownload');
var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
window.open(url);

这将在同一窗口中下载生成的图像。它对我有用！

【讨论】：