Tag: fileapi

如何在Canvas上从HTML5 File API中绘制图像？: 我想在canvas上绘制一个用HTML5 File API打开的图像。在handleFiles(e)方法中，我可以通过e.target.files[0]访问File，但是我不能直接使用drawImage绘制图像。如何从HTML5canvas上的File API绘制图像？这是我使用的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script> window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles); } function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); ctx.drawImage(e.target.files[0], 20,20); alert('the image is drawn'); } </script> </head> <body> <h1>Test</h1> <input type="file" id="input"/> <canvas width="400" height="300" id="canvas"/> </body> </html>

如何从对象URL获取文件或blob？: 我允许用户通过拖放和其他方法加载图像到页面。当图像被丢弃时，我使用URL.createObjectURL转换为对象URL来显示图像。我不撤销url，因为我重复使用它。所以，当创build一个FormData对象的时候，我可以允许他们上传一个带有其中一个图片的表单，是否有一些方法可以将这个对象URL反转回到一个Blob或者文件中，然后我可以追加它的FormData对象？

如何使用Angular2下载文件: 我有一个WebApi / MVC应用程序，我正在开发一个angular2客户端（以取代MVC）。我有一些麻烦了解Angular如何保存文件。请求是好的（与MVC工作正常，我们可以logging收到的数据），但我不知道如何保存下载的数据（我大多遵循在这篇文章中相同的逻辑）。我相信这简直是愚蠢的，但到目前为止，我根本就没有把握。组件函数的代码如下所示。我已经尝试了不同的select，blob方式应该是我所了解的方式，但URL没有函数createObjectURL 。我甚至无法在窗口中findURL的定义，但显然它存在。如果我使用FileSaver.js模块， FileSaver.js得到相同的错误。所以我想这是最近改变的或者还没有实施的东西。如何触发保存在A2中的文件？ downloadfile(type: string){ let thefile = {}; this.pservice.downloadfile(this.rundata.name, type) .subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data), error => console.log("Error downloading the file."), () => console.log('Completed file download.')); let url = window.URL.createObjectURL(thefile); window.open(url); } 为了完整起见，获取数据的服务如下，但它唯一做的是发出请求并传递数据，如果成功则不映射： downloadfile(runname: string, type: […]

使用Javascript文件API获取图像尺寸: 我需要在我的Web应用程序中生成一个图像的缩略图。我利用Html 5 File API来生成缩略图。我利用下面的URL中的例子来生成缩略图。 http://www.html5rocks.com/en/tutorials/file/dndfiles/ 我成功地能够生成缩略图。我有的问题是我能够通过使用静态大小生成缩略图。有没有办法从选定的文件中获取文件尺寸，然后创build图像对象？

从HTML5 Canvas获取二进制（base64）数据（readAsBinaryString）: 有什么方法可以将HTML Canvas的内容作为二进制数据读取吗？目前我已经得到了下面的HTML来显示一个input文件和它下面的canvas： <p><button id="myButton" type="button">Get Image Content</button></p> <p>Input:<input id="fileInput" type="file"/></p> <p>Canvas<canvas id="myCanvas" width="578" height="200"/></p> 然后我设置我的input文件正确设置canvas，它工作正常： $('#fileInput').on('change', function() { $.each(this.files, function() { var image = new Image(); image.src = window.URL.createObjectURL(this); image.onload = function() { $("canvas").drawImage({ source: image, x: 50, y: 50, width: 100, fromCenter: false }); }; }); }); 我现在需要从Canvas获取二进制数据（Base64编码），当button被点击时，它会将数据推送到服务器… 最终的结果是，我需要为用户提供select文件，裁剪/resize的function，然后单击一个button，编辑后的图像将被上传到服务器（我不能做服务器端由于服务器端的限制裁剪/resize…）任何帮助将是伟大的！干杯

如何下载文件，而不使用<a>元素与下载属性或服务器？: 根据caniuse ， Microsoft Edge build 10547+支持<a>元素的download属性，但不支持IE或Safari 。如何下载文件对象，而不使用带有download属性集的<a>元素或服务器？

记住并重新填充文件input: 我有一个网站，允许用户多次上传文件进行处理。目前我有一个单一的文件input，但我想能够记住用户的select，并显示在屏幕上。我想知道怎么做是在用户select一个文件后，我会记住他们的select，并重新显示文件input与预先select的页面重新加载的文件。我只需要知道如何记住和重新填充文件input。我也接受不使用文件input的方法（如果可能的话）。我正在使用JQuery