1

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

Post :下载图片是 src 属性 (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);

}

很好的编辑和答案

4

2 回答 2

0

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

window.location.href = 'data:image/png;base64,id23gas2fo....
于 2013-02-26T14:10:47.217 回答
0

尝试通过以下方式下载它：

$('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);

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

于 2014-08-14T19:22:01.090 回答