Question

我的网页上有一个画布，用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);

}

很好的编辑和坦克回答

Answer 1

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

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

Answer 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);

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

从编码的base64画布下载图像会产生maxUrlLength值错误

2 个答案: