Javascript 转换后的图像应该有一些小的url，而不是基本代码

现在我正在上传图片到画布上，上传图片后，画布通过toDataURl转换成图片。若我通过toDataURL将画布转换为图像，那个么我会得到基本代码（基本代码会很大）。我想要一些小的url而不是基本代码

var canvas=newfabric.canvas（'canvas'）；
document.getElementById（'file'）.addEventListener（“更改”，函数（e）{
var file=e.target.files[0]；
var reader=new FileReader（）；
reader.onload=函数（f）{
var数据=f.target.result；
var img=document.createElement（'img'）；
img.src=数据；
img.onload=函数（）{
如果（img.宽度<300 | | img.高度<300）
{
警报（“上传图像应更大”）；
canvas.getActiveObject（）.remove（）；
}
};
fabric.Image.fromURL（数据、函数（img））{
var oImg=img.set（{左：50，上：100，宽：100，高：100，角：00}）。比例（0.9）；
canvas.add（oImg.renderAll（）；
var a=canvas.setActiveObject（oImg）；
var dataURL=canvas.toDataURL（{格式：'png'，质量：0.8}）；
日志（“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
//console.log（“画布图像”+dataURL）；
//document.getElementById（'txt'）。href=dataURL；
});
};
reader.readAsDataURL（文件）；
});
document.querySelector（'#txt'）.onclick=function（e）{
e、 预防默认值（）；
canvas.deactivateAll（）.renderAll（）；
document.querySelector（'#preview'）.src=canvas.toDataURL（）；
var b=canvas.toDataURL（）；
控制台日志（b）；
}

画布{
边框：1px纯黑；
}

问题的关键在于细节——在问题的任何地方，你都没有建议你将图像发送到某个地方——下面的代码仅限于客户端——你只能在客户端上使用简短的url，正如在评论中提到的那样，只可用于会话（重新启动浏览器，url无效），或者直到调用

revokeObjectURL

您可以-如果浏览器支持它，请使用Blob，它的URL很短

// converts a dataURI to a Blob
function dataUriToBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var arrayBuffer = new ArrayBuffer(byteString.length);
    var _ia = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteString.length; i++) {
        _ia[i] = byteString.charCodeAt(i);
    }
    var dataView = new DataView(arrayBuffer);
    var blob = new Blob([dataView], { type: mimeString });
    return blob;
}
// cross browser cruft
var get_URL = function () {
    return window.URL || window.webkitURL || window;
};
// ... your code, which eventually does this
var b = canvas.toDataURL();
// get an URL from the Blob
var blob = dataUriToBlob(b);
var url = get_URL().createObjectURL(blob);
console.log(url);
//
// ... when finished with the object URL
URL.revokeObjectURL(url);

//将数据URI转换为Blob
函数dataUriToBlob（dataURI）{
var byteString=atob（dataURI.split（'，'）[1]）；
var mimeString=dataURI.split（'，'）[0]。split（'：'）[1]。split（'；'）[0]；
var arrayBuffer=新的arrayBuffer（byteString.length）；
var_ia=新的Uint8Array（arrayBuffer）；
for（var i=0；i

如果要避免发送数据URL，可以使用以下功能将其转换为数据表单：

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

最后，发送此表单（常规或ajax）

---

一些小url

。。。你有什么想法吗？@JaromandaX。我不知道。只是出于好奇，为什么有长的url很重要？

当我向服务器发送url时

-在原始问题中了解这个细节会很有用。二进制o base64编码的png图像没有小格式，大于500x500的图像将有几千字节。当我使用你们的代码时，控制台中会出现错误。ReferenceError:未定义dataUriToBlob

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);