使用FileReader's readAsDataURL()我可以将任意数据转换为数据URL.有没有办法Blob使用内置的浏览器apis 将数据URL转换回实例？
保存画布对象的不同方法有哪些？
在我的研究中,我发现了两种方法:
var data = canvas.toDataURL();
var prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;
另一种方法是拍摄快照.
还有其他方法吗？
是否可以自定义下载文件名？
我有一个显示我的网络摄像头的画布的DataURL.我使用Matt的答案将此dataURL转换为blob:如何在javascript中将dataURL转换为文件对象？
如何将此blob转换回相同的DataURL？我花了一天的时间研究这个问题并且我很震惊,除非我失明,否则没有更好的记录.
编辑:有
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
但它只返回一个看似指向本地文件的非常短的URL,但我需要通过网络发送网络摄像头数据.
上面的粗线是那个不起作用的线,我正试图想出来.以下是该文章的相关HTML和javascript:
<button type="button" class="btn btn-primary" id="transform">
<span class="glyphicon glyphicon-wrench"></span>
Transform Uploaded Files
</button>
<a id="test_dl" href="" download="user_download.zip">
Download File
</a>
$('#transform').click(function (e) {
$.getJSON('/transform', {}, function (final_zip){
var zipfile = "file://" + final_zip.zip_filename
$('a#test_dl').attr("href", zipfile)
});
});
用户单击"转换上载的文件"按钮,然后将href更新为生成的zipfile位置,然后通过单击"下载文件"HTML下载生成的包.
到目前为止,我已经在Chrome中对此进行了测试并使用了开发人员控制台,我可以看到在点击下载按钮之前href正在正确更新,但它总是会出现"失败 - 网络错误"对话框.奇怪的是,当我点击"显示所有下载"然后点击失败的下载时,它就成功完成了.
编辑:我应该补充一点,这个后端目前正在Python的Flask上运行
我正在使用javascript和html画布来调整jpeg图像的大小.调整大小后,我将其canvas.toDataURL用作锚标记中的href属性,以便提供用户可以下载已调整大小的图像的链接.
这可以很好地达到某个图像大小.
似乎不同的浏览器对数据网址的大小有不同的限制,如下所述:https: //developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs
在chrome中,当我超过数据URL大小限制时,单击下载链接时没有任何反应; 没有错误或任何事情(据我所知).
有没有办法以编程方式检测数据网址是否过大？也许某些浏览器事件会告诉我点击下载链接是否失败？
理想情况下,我想检测下载是否成功.当数据网址太大时,我想向最终用户显示一个解释,说明如何右键单击图像并选择"另存为...",这似乎总是有效.
更新1:
看起来使用canvas.toBlob是目前最好的解决方法.这是api文档:https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob.
这是一个jsfiddle,演示了当使用toDataURL更大的画布时,锚点href下载链接如何失败,但toBlob似乎有效:
https://jsfiddle.net/upgradingdave/c76q34ac/3/
以下是一些相关的stackoverflow问题: canvas.toDataURL()下载大小限制
我在做什么：
我正在使用Fabric.js开发画布应用程序。用户可以在画布中放置图像或文本
我想做的事：
当用户下载图像时，用户应该能够打印它。目前我正在研究 length: 5 X 8 (inches)。在 中Fabric.js，toDataURL()函数默认会给出72 DPI图像，我打算用PHP它来将其转换为300dpi图像。
因此，要创造一个高品质的图像5X8 与300dpi，形象应该是1500px X 2400px。但我不能为用户提供那么多空间，因为它不会很直观。
所以，我做了以下链接中的建议
问题：
但我正面临一个麻烦。当用户放置文本或图像时，它显得非常小。当我单击文本或图像时，几乎看不到边角和边框。它考虑了画布的相对大小。请看小提琴