我正在使用javascript和htmlcanvas调整jpeg图像的大小。调整大小后,我canvas.toDataURL在锚标记中用作href属性,以提供一个链接,用户可以在其中下载调整大小的图像。
canvas.toDataURL
在一定的图像尺寸下效果很好。
似乎不同的浏览器对数据URL的大小有不同的限制,如下所述
在chrome中,当我超出数据URL大小限制时,单击下载链接不会发生任何事情。没有错误或任何东西(据我所知)。
是否可以通过编程方式检测数据url是否太大?也许某些浏览器事件会告诉我单击下载链接是否失败?
理想情况下,我想检测下载是否成功。当数据URL太大时,我想向最终用户显示说明,说明如何右键单击图像并选择“另存为…”,这似乎总是可行的。
不,似乎没有任何事件让您知道具有该download属性的锚点是否实际上已成功下载资源。
download
但是,您面临的限制似乎仅与这种情况有关:<a>具有download属性的锚元素。
<a>
浏览器可以处理更长的dataURI(我认为在大多数浏览器中,限制与字符串长度的限制相同)。例如,它可以将其加载到<img>element上,更重要的是,它可以处理dataURI字符串。
<img>
这很重要,因为它允许您将dataURI转换为Blob,然后object URL从该Blob 创建一个。object URL的URI很小,在带有download属性的锚点中不会遇到此长度限制。
object URL
因此,根据您的情况,最好的canvas.toBlob方法是直接使用该方法mdn上提供了polyfill,并将object URL的URI作为href锚点的传递。
canvas.toBlob
href
var img = new Image(); img.crossOrigin = "anonymous"; img.onload = function(){ var ctx = document.createElement('canvas').getContext('2d'); ctx.canvas.width = this.width*10; ctx.canvas.height = this.height*10; ctx.drawImage(this,0,0,ctx.canvas.width, ctx.canvas.height); // convert our canvas to a png blob // (for type use the second parameter, third is for quality if type is image/jpeg or image/webp) ctx.canvas.toBlob(function(blob){ myAnchor.href = URL.createObjectURL(blob); }); // since we are dealing with use files, we absolutely need to revoke the ObjectURL as soon as possible var revokeURL = function(){ // but we have to wait that the browser actually prepared the file to download requestAnimationFrame(function(){ // we've waited one frame, it's seems to be enough URL.revokeObjectURL(this.href); this.href=null; }); this.removeEventListener('click', revokeURL); }; myAnchor.addEventListener('click', revokeURL); }; img.src = 'http://lorempixel.com/200/200/'; <a id="myAnchor" download="anAwesomeImage.png">download</a>
(由于downloadSE摘录中的某些UA阻止了该属性)
但是请注意,即使的字符串表示形式(URI)object URL很短,它实际上也会占用浏览器内存中文件的大小,因此,直到您硬刷新页面(清除缓存)或关闭创建位置的标签为止此对象的网址。因此,您绝对需要致电URL.revokeObjectURL()以清除此空间。 但是,由于没有事件可知道下载是否真正成功,因此您将受困于该onclick事件,该事件将 在 文件下载发生 之前 触发。从我的测试中,等待一个帧requestAnimationFrame就足够了,但是我可能错了。
URL.revokeObjectURL()
onclick
requestAnimationFrame
对于那些使用画布以外的其他来源来获取其dataURI的消息,SO中已经有很多关于将dataURI转换为Blob的文章,您可以检查上面提供的mdn polyfill,他们正在这样做太。