[英]A cross-browser alternative to Canvas2Image or HTML5 download attribute?
While developing a pattern generator I am running into the same problem described in this question from 2011. 在开发模式生成器的过程中,我遇到了2011年这个问题中描述的相同问题。
The answers given don't really offer a cross-browser , client-side solution. 给出的答案并没有真正提供跨浏览器的 客户端解决方案。
I would accept any of the following solutions when clicking the Export Pattern button: 单击“ 导出模式”按钮时,我会接受以下任何解决方案:
Triggering a download through canvas2image while ensuring that the file is saved with a .png extension (no matter what the filename is set to) or , 通过canvas2image触发下载,同时确保以.png扩展名保存文件(无论文件名设置为什么), 或者 ,
Display a widget (KendoUI preferably) with the image resulting from the Canvas2Image.saveAsPNG()
method and let the user save it from there preferably not using the lame right-click solution, but with a link or a button. 使用
Canvas2Image.saveAsPNG()
方法生成的图像显示窗口小部件(最好是Canvas2Image.saveAsPNG()
,让用户从那里保存它,最好不要使用蹩脚的右键单击解决方案,而是使用链接或按钮。
HTML for the button I'm currently using: 我正在使用的按钮的HTML:
<button id="downloadbtn" onClick="javascript:downloadImage()" data-role="button" class="k-button">Export Pattern</button>
Function that triggers the download: 触发下载的功能:
function downloadImage () {
//...extra code omitted
var oCanvas = document.getElementById("my_canvas");
oCanvas.width = $("#pixels-h").val();
oCanvas.height = $("#pixels-v").val();
Canvas2Image.saveAsPNG(oCanvas);
//...extra code omitted
}
The file seems to download fine under OSX with Chrome Version 23.0.1271.95 and Safari Version 5.1.7 (6534.57.2). 该文件似乎可以在OSX下使用Chrome版本23.0.1271.95和Safari版本5.1.7(6534.57.2)下载。
I have a report of someone unable to open the file after downloading it under Firefox 17.0.1 for OSX. 我有一个报告,有人在Firefox 17.0.1 for OSX下载后无法打开该文件。 Apparently the download generates a .part file.
显然,下载会生成.part文件。
The biggest issue is that without a file extension I doubt that this method can be reliable. 最大的问题是没有文件扩展名,我怀疑这种方法是否可靠。
I am looking for a client-side only solution with the widest possible compatibility with current browsers, so I guess the HTML5 download
attribute would not do the trick as it is currently only supported in Chrome. 我正在寻找一种仅与客户端兼容的解决方案,与当前浏览器具有最广泛的兼容性,因此我猜HTML5
download
属性不会起作用,因为目前只支持Chrome。
Any creative solutions? 有创意的解决方案
I ran into the same issue. 我遇到了同样的问题。 The basic problem is the filename needs to be added in the header but canvas2images uses document.location.href = strData and strData doesnt have headers.
基本问题是需要在头文件中添加文件名,但canvas2images使用document.location.href = strData,而strData没有头文件。 So the answer is, canvas2image does not support the feature we need, and we will need to try another solution.
所以答案是,canvas2image不支持我们需要的功能,我们需要尝试另一种解决方案。 (for example perhaps FileSaver.js and canvas-toBlob.js)
(例如,可能是FileSaver.js和canvas-toBlob.js)
http://eligrey.com/demos/FileSaver.js/ http://eligrey.com/demos/FileSaver.js/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.