fileapi

How do I generate a thumbnail client-side in a modern browser?

由 久未见 提交于 2019-12-17 15:36:43
问题 I'm looking for an elegant way to generate a thumbnail for use with the FileAPI. Currently I get a DataURL representing an image. Problem is, if the image is very large, than moving it around and rerendering it becomes CPU intensive. I can see 2 options to get around this. Generate a thumbnail on the client Generate a thumbnail on the server, send the thumbnail back to the client (AJAX). With HTML5 we have a canvas element? Does anyone know how to use it to generate thumbnails from pictures?

The File API isn't working in IE9

由 五迷三道 提交于 2019-12-17 10:06:10
问题 I'm trying to get the file size and file type from an input field from my form using jQuery. I thought it was working however apparently not in IE 9. Any insight would be greatly appreciated var my_field = this.files[0]; var myInteger = parseInt(my_field.size); var myType = my_field.type; 回答1: Im trying to get the file size and file type from an input field... That requires the File API, which isn't supported by IE9. (And note that size is already a number [on browsers that support the File

How can I draw an image from the HTML5 File API on Canvas?

由 最后都变了- 提交于 2019-12-17 08:24:11
问题 I would like to draw an image opened with the HTML5 File API on a canvas. In the handleFiles(e) method, I can access the File with e.target.files[0] but I can't draw that image directly using drawImage . How do I draw an image from the File API on HTML5 canvas? Here is the code I have used: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script> window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles); } function

How can I draw an image from the HTML5 File API on Canvas?

由 夙愿已清 提交于 2019-12-17 08:24:07
问题 I would like to draw an image opened with the HTML5 File API on a canvas. In the handleFiles(e) method, I can access the File with e.target.files[0] but I can't draw that image directly using drawImage . How do I draw an image from the File API on HTML5 canvas? Here is the code I have used: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script> window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles); } function

Convert base64 png data to javascript file objects

由 时间秒杀一切 提交于 2019-12-17 06:34:27
问题 I have two base64 encoded in PNG, and I need to compare them using Resemble.JS I think that the best way to do it is to convert the PNG 's into file objects using fileReader . How can I do it? 回答1: You can create a Blob from your base64 data, and then read it asDataURL : var img_b64 = canvas.toDataURL('image/png'); var png = img_b64.split(',')[1]; var the_file = new Blob([window.atob(png)], {type: 'image/png', encoding: 'utf-8'}); var fr = new FileReader(); fr.onload = function ( oFREvent ) {

Convert base64 png data to javascript file objects

由 折月煮酒 提交于 2019-12-17 06:34:06
问题 I have two base64 encoded in PNG, and I need to compare them using Resemble.JS I think that the best way to do it is to convert the PNG 's into file objects using fileReader . How can I do it? 回答1: You can create a Blob from your base64 data, and then read it asDataURL : var img_b64 = canvas.toDataURL('image/png'); var png = img_b64.split(',')[1]; var the_file = new Blob([window.atob(png)], {type: 'image/png', encoding: 'utf-8'}); var fr = new FileReader(); fr.onload = function ( oFREvent ) {

Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

由 余生长醉 提交于 2019-12-17 03:03:29
问题 Is there any way of reading the contents of a HTML Canvas as binary data? At the moment I've got the following HTML to show an input file and the canvas below it: <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> I've then setup my input file to set the canvas correctly which works fine: $('#fileInput').on('change', function() { $.each(this.files, function() { var

Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

由 不羁的心 提交于 2019-12-17 03:03:13
问题 Is there any way of reading the contents of a HTML Canvas as binary data? At the moment I've got the following HTML to show an input file and the canvas below it: <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> I've then setup my input file to set the canvas correctly which works fine: $('#fileInput').on('change', function() { $.each(this.files, function() { var

Clarification required on Javascript in HTML5 fileAPI for image preview

由 让人想犯罪 __ 提交于 2019-12-13 20:53:23
问题 I was looking at the new HTML5 file API for showing a preview of an image to be uploaded. I googled for some code and almost every example had the same structure, almost the same code. I don't mind copying, particularly when it works, but I need to understand it. So I tried to understand the code but I am stuck with one area and need someone to explain that small part: The code refers to a HTML form input field and when the file is selected shows the preview image in a img tag. Nothing fancy.

Are Google Chrome Base64 methods capable of handling binary data from the File API?

由 …衆ロ難τιáo~ 提交于 2019-12-13 16:17:26
问题 I am using btoa and atob for Base64 but the atob method doesn't work on binary data! Just text. How can I solve this? if(!!window.createBlobURL || !!window.createObjectURL) { var bb = new BlobBuilder(); var reader = new FileReader(); var url_creator = window.createBlobURL || window.createObjectURL; bb.append(atob(msg.bit.file.data)); reader.onloadend = function(e) { bb = new BlobBuilder(); bb.append(e.target.result); var url = url_creator(bb.getBlob(msg.bit.file.type)); window.open(url); }
订阅 fileapi