html - how to set auto width of image in javascript -


i have code in uploading image displays image resized one.

<!doctype html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>image preview example</title>  </head>  <body onload="loadimagefile();">   <form name="uploadform">     <table>       <tbody>         <tr>           <td><img id="originalimg"/></td>           <td><img id="uploadpreview"/></td>           <td><input id="uploadimage" type="file" name="myphoto" onchange="loadimagefile();" /></td>         </tr>       </tbody>     </table>   </form> </body> <script type="text/javascript"> ofreader = new filereader(), rfilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;  ofreader.onload = function (ofrevent) {    var img=new image();   img.onload=function(){       document.getelementbyid("originalimg").src=img.src;       var canvas=document.createelement("canvas");       var ctx=canvas.getcontext("2d");       canvas.width=img.width/2;       canvas.height= img.height/2;       ctx.drawimage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);       document.getelementbyid("uploadpreview").src = canvas.todataurl();       alert(canvas.todataurl());   }   img.src=ofrevent.target.result; };  function loadimagefile() {   if (document.getelementbyid("uploadimage").files.length === 0) { return; }   var ofile = document.getelementbyid("uploadimage").files[0];   if (!rfilter.test(ofile.type)) { alert("you must select valid image file!"); return; }   ofreader.readasdataurl(ofile); } </script> </html>

now in line :

canvas.width=img.width/2; canvas.height= img.height/2;

sets canvas/resized image img width divide 2 half of value.

my question how can set static value of width , height auto resized value?

i tried didn't work.

canvas.width=500; canvas.height='auto';

you have calculate ratio of actual image, can use easy calculation : 

var ratio = img.height/img.width; canvas.width = wantedwidth; canvas.height = ratio*wantedwidth; 

document.queryselector('button').addeventlistener('click', function() {        var wantedwidth = +wwidth.value;        img.onload = function() {          var ratio = img.height/img.width;          canvas.width = wantedwidth;          canvas.height = ratio*wantedwidth;          canvas.getcontext('2d').drawimage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);        }        img.src = 'http://lorempixel.com/' + owidth.value + '/' + oheight.value;      }, false);
original width :  <input type="number" id="owidth" value="200" /><br>  original height :  <input type="number" id="oheight" value="400" /><br>  wanted width :  <input type="number" id="wwidth" value="300" /><br>  <button>set it</button><br>  <canvas id="canvas"></canvas>  <img id="img" src="" />


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more