tag:blogger.com,1999:blog-34454975.post1007315614413517675..comments2023-06-28T16:58:41.189+02:00Comments on Web Reflection: 100% Client Side Image ResizingAndrea Giammarchihttp://www.blogger.com/profile/16277820774810688474noreply@blogger.comBlogger32125tag:blogger.com,1999:blog-34454975.post-76358982597035693512015-07-08T23:10:18.710+02:002015-07-08T23:10:18.710+02:00This is what a called a life saver!This is what a called a life saver!Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-34454975.post-87893932830412043582014-11-25T14:21:15.167+01:002014-11-25T14:21:15.167+01:00if you upload both images I find the client side s...if you upload both images I find the client side solution pointless since you have imagemagik in your server that is probably faster than double upload original/reduced <br /><br />In any case, you cannot send the image as file field, you need to pass its base64 representation as extra POST parameter and base64_decode on the server side before treathing it as a BLOB in your database.<br /><br />Also, since you use PDO I wonder why you manually escape everything instead of letting PDO do the job directly which is easier to write, read, and most likely more performant and reliable plus you can swap database whenever you want without changing mysql_real_escape_string per each operation ;-)<br /><br />CheersAndrea Giammarchihttps://www.blogger.com/profile/16277820774810688474noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-58791565983090128852014-11-25T04:13:11.726+01:002014-11-25T04:13:11.726+01:00Thank you for this so much. I would like to use it...Thank you for this so much. I would like to use it to upload a down sized image to a mysql db. I have the upload working with the original sized image just fine and have your demo working as well, I just dont know how to tie the two together. My javascript is very limited. this is the PHP code I use to upload.<br /><br /> $image_name1 = mysql_real_escape_string($_FILES['image1']['name']);<br /> // resize here<br /> $image_data1 = mysql_real_escape_string(file_get_contents($_FILES['image1']['tmp_name']));<br /> $image_type1 = mysql_real_escape_string($_FILES['image1']['type']);<br /> <br /> $image_name2 = mysql_real_escape_string($_FILES['image2']['name']);<br /> // resize here<br /> $image_data2 = mysql_real_escape_string(file_get_contents($_FILES['image2']['tmp_name']));<br /> $image_type2 = mysql_real_escape_string($_FILES['image2']['type']);<br /> <br /> //update database<br /> $pdo = Database::connect();<br /> $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);<br /> $sql = "UPDATE rcd<br /> SET rcd_pass1 = ". $rcd1.",<br /> rcd_pass2 = ". $rcd2.",<br /> rcd_notes = '". $notes ."',<br /> rcd_photo1 = '". $image_data1 ."',<br /> rcd_photo1a = '". $image_name1 ."',<br /> rcd_photo2 = '". $image_data2 ."',<br /> rcd_photo2a = '". $image_name2 ."'<br /> WHERE insp_id = ". $insp_id;<br /> $q = $pdo->prepare($sql);<br /> $q->execute();<br /> //$row = $q->fetch(PDO::FETCH_ASSOC);<br /> <br /> Database::disconnect();Unknownhttps://www.blogger.com/profile/13301664414870616690noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-50172819343886645192013-12-06T11:06:02.459+01:002013-12-06T11:06:02.459+01:00just THANK YOU !just THANK YOU !Anonymoushttps://www.blogger.com/profile/06339027062600578158noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-78438388220178156762013-04-19T14:19:36.830+02:002013-04-19T14:19:36.830+02:00This is exactly what I was looking for, Great Job ...This is exactly what I was looking for, Great Job Andrea! I do have one question. I'm not an experienced programer so bear with me please. I have a need for the image to be saved in JPG format. I did some research and modified the code in to read:<br /><br />onresample(canvas.toDataURL("image/jpeg", 0.70));<br /><br />This worked fine for Firefox and Chrome but as usual not in IE 10. IE 10 still wants to save in PNG format. Any ideas on how to get IE 10 to save in JPG format?Anonymoushttps://www.blogger.com/profile/08344559402747695094noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-32879338345420895892013-03-20T21:49:55.580+01:002013-03-20T21:49:55.580+01:00hi again, i put filereader structure into a functi...hi again, i put filereader structure into a function and call it but still the latest photo in the array is generated but if i put (very strange) an alert command between generations it succeeds creating all photos.<br /><br />function dosya(isim) { <br /> <br /> file = new FileReader;<br /> // assign directly events<br /> // as example, Chrome does not<br /> // inherit EventTarget yet<br /> // so addEventListener won't<br /> // work as expected<br /> file.onload = load;<br /> file.onabort = abort;<br /> file.onerror = error;<br /> <br /> // cheap and easy place to store<br /> // desired width and/or height<br /> file._width = width;<br /> file._height = height;<br /> // time to read as base 64 encoded<br /> // data te selected image<br /> file.readAsDataURL(isim);<br /> file.onloadend= bitti;<br /> alert($file.files[0].name) *** if this line exists multiple files are generated!<br /> <br /> }<br /> <br /> <br /> <br /> dosya($file.files[0]);<br /> dosya($file.files[1]);Mete Kavrukhttps://www.blogger.com/profile/17324726624450219527noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-10673938746731596432013-03-19T17:43:07.332+01:002013-03-19T17:43:07.332+01:00Mete you cannot do this file.readAsDataURL($file.f...Mete you cannot do this file.readAsDataURL($file.files[0]); and file.readAsDataURL($file.files[1]); because file has only one onload.<br /><br />Again, you need to create a new FileReader **per each** image in the list.Andrea Giammarchihttps://www.blogger.com/profile/16277820774810688474noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-43639501111986411432013-03-19T15:01:32.333+01:002013-03-19T15:01:32.333+01:00you can find your script in my interface on http:/...you can find your script in my interface on http://www.emlaksitesitasarim.com/submitresize/fotograf.htm when sorted out the multiple file upload part i will also make changing the the order of uploaded photos by extra user menus.Mete Kavrukhttps://www.blogger.com/profile/17324726624450219527noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-88241253053522390042013-03-19T14:56:14.327+01:002013-03-19T14:56:14.327+01:00i tried that below.
file.readAsDataURL($file.files...i tried that below.<br />file.readAsDataURL($file.files[0]);<br />file.readAsDataURL($file.files[1]); and resample.js calls a php file with unique filename but only last index gets processed. you mean new file = new FileReader; i also tried it now to repeat the block of code for each file but does not help. I can successfully take the number of files selected and their names in files[] array.Mete Kavrukhttps://www.blogger.com/profile/17324726624450219527noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-81447167215031798342013-03-19T01:33:33.847+01:002013-03-19T01:33:33.847+01:00you need to new FileReader each file ... it would ...you need to new FileReader each file ... it would be easier to check your code to help. Is it in github or somewhere public?Andrea Giammarchihttps://www.blogger.com/profile/16277820774810688474noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-58787805806547861022013-03-19T01:03:16.705+01:002013-03-19T01:03:16.705+01:00thanks for the code.saving lives. but i want to us...thanks for the code.saving lives. but i want to use multi file select option. i have designed a good interface with your script hidden inside. With my interface you can select or deselect photos for any further process requested. i thought to loop through array $file.files[i] at the line file.readAsDataURL($file.files[0]); but it does process the last index... i call a php file creating images with unique name... If i can finish i can share the whole modified script here... cheers...Mete Kavrukhttps://www.blogger.com/profile/17324726624450219527noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-27065497655084717352013-03-08T20:51:45.373+01:002013-03-08T20:51:45.373+01:00so this code works then... oh well, I need to see/...so this code works then... oh well, I need to see/know/test your stuff then, nothing I can solve without seeing the whole thing and a debugger ^_^Andrea Giammarchihttps://www.blogger.com/profile/16277820774810688474noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-23714856355277251192013-03-08T20:51:44.541+01:002013-03-08T20:51:44.541+01:00so this code works then... oh well, I need to see/...so this code works then... oh well, I need to see/know/test your stuff then, nothing I can solve without seeing the whole thing and a debugger ^_^Andrea Giammarchihttps://www.blogger.com/profile/16277820774810688474noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-47953421082864068352013-03-08T10:34:27.663+01:002013-03-08T10:34:27.663+01:00No it is supporting by IE 10. I did the test with ...No it is supporting by IE 10. I did the test with the demo and everything works fine! My problem is that I call the Resample function from a Mootools Object and then in this function I call for my method placeNewAvatar.<br /><br />In the example, everything is done inside differents functionsAnonymoushttps://www.blogger.com/profile/16622109232138076951noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-60538720566140546322013-03-07T18:55:07.034+01:002013-03-07T18:55:07.034+01:00either IE10 does not support bind or some canvas A...either IE10 does not support bind or some canvas API such toDataURL() or something else?Andrea Giammarchihttps://www.blogger.com/profile/16277820774810688474noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-80405291832948565962013-03-07T18:30:01.682+01:002013-03-07T18:30:01.682+01:00This comment has been removed by the author.Anonymoushttps://www.blogger.com/profile/16622109232138076951noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-69284639104555302862013-01-09T15:10:20.668+01:002013-01-09T15:10:20.668+01:00is it more than 1Mb only?is it more than 1Mb only?Andrea Giammarchihttps://www.blogger.com/profile/16277820774810688474noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-66983980618381225632013-01-09T08:53:45.721+01:002013-01-09T08:53:45.721+01:00Well, it's works fine in desktop but in mobile...Well, it's works fine in desktop but in mobile, when i try to upload an image more than 1MB, it could upload successfully, but the image will become squeezed. any idea?<br /><br />i'm using iPhone 5 with iOS6.James Woo (gatzat)https://www.blogger.com/profile/09837114342440330019noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-46826572000183840862012-12-20T18:10:07.996+01:002012-12-20T18:10:07.996+01:00Worked fine, pass through other file variable via ...Worked fine, pass through other file variable via jquery and some coding for call external process for upload file in PHP, works like a charm! :))Anonymoushttps://www.blogger.com/profile/03749110714922882546noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-72538475520192708052012-12-20T16:45:59.660+01:002012-12-20T16:45:59.660+01:00Hello, nice script and really fast/dynamic, but......Hello, nice script and really fast/dynamic, but... How can I get the image data and pass this to a File element for make a post and upload via PHP/similar to the server side?<br /><br />Any ideas?Anonymoushttps://www.blogger.com/profile/03749110714922882546noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-27454748118893731962012-12-20T16:44:40.981+01:002012-12-20T16:44:40.981+01:00Any new idea for modify or implement the image upl...Any new idea for modify or implement the image upload to server via PHP or similar?<br /><br />I cant get the resized image... :(Anonymoushttps://www.blogger.com/profile/03749110714922882546noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-12784469881577505032012-05-15T14:49:21.686+02:002012-05-15T14:49:21.686+02:00hi this script is perfect until rookies like us do...hi this script is perfect until rookies like us do not know how to code 'uploading the file to server' part...Could you please publish it also ? thanks...Mete Kavrukhttps://www.blogger.com/profile/17324726624450219527noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-68208538817725526722011-10-20T07:25:08.963+02:002011-10-20T07:25:08.963+02:00@ pandeyanand and Job,
If you do a simple form sub...@ pandeyanand and Job,<br />If you do a simple form submit use java script to get the data of src attribute and assign it to a hidden input.(you will need to do some string work at the client side or server side in order to omit the "data:image/png;base64," part).<br />I think i dont need to explain the ajax part.<br />In the server if you use php try this out.<br /><br /><br /><br />If you use java use BASE64Decoder class from sun.misc.BASE64Decoder package.<br /><br />Andrea, Nice work.well done.wish if IE6 wasn't here.Vishwahttps://www.blogger.com/profile/01478656976203234637noreply@blogger.comtag:blogger.com,1999:blog-34454975.post-75733097519857337692011-08-23T20:31:43.711+02:002011-08-23T20:31:43.711+02:00Hey Andrea,
Nice work. But how can we store it...Hey Andrea,<br /><br /> <br /><br />Nice work. But how can we <b>store it into another variable</b> and upload the converted image to server.<br /><br /> <br /><br /><i>I am new to JavaScript, so please help me.</i>Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-34454975.post-12077546180653021272011-04-17T23:56:59.979+02:002011-04-17T23:56:59.979+02:00canvas.toDataURL("image/png") or canvas....canvas.toDataURL("image/png") or canvas.toDataURL("image/jpeg") ?Andrea Giammarchihttps://www.blogger.com/profile/16277820774810688474noreply@blogger.com