i'm trying add image textbox adjust width , height via textbox , when hit confirm add values new canvas. thought knew doing, don't getting annoyed simple. wondering if can me out.
html
<div id="menubar"> <input type="button" name="ifile" value="file"> <div id="filemenu"> <ul class="filemenu"> <li><input type="button" name="addimg" value="open image"></li> <li><input type="button" name="addimgurl" value="open image url"></li> </ul> </div> </div> <div class="darkoverlay"> <div class="openurl"> <form name="openurl"> <center> image url: <input type="text" name="openurl" value="http://www.google.com/images/srpr/logo4w.png"> <p> width: <input type="text" name="imgwidth" style="width:100px;"> height: <input type="text" name="imgheight" style="width:100px;"> </p> <p> <input style="position:absolute; bottom:15px; left:15px;" type="button" name="confirmurl" value="confirm"> <input style="position:absolute; bottom:15px; right:15px;" type="button" name="closeurl" value="close"> </p> </center> </form> </div> </div> <div class="pinklayout"> <p><center> <a class="menuheader"><strong>settings</strong>:</a><br /> </center></p> adjust webitwidget's transparency: <div id="camdesk-slider"></div><p></p> <p name="dimen" align="center"> widget size: <input type="text" name="width" value=""> , <input type="text" name="height" value=""> </p> <input style="position:absolute; bottom:15px; left:15px;" type="button" name="confirm" value="confirm"> <input style="position:absolute; bottom:15px; right:15px;" type="button" name="close" value="close"> </div> css
body { padding:0px; margin:31px 0px 0px 0px; overflow:hidden;} /* file menubar */ ul.filemenu { list-style:none; margin:0px; padding:0px;} div#menubar { position:absolute; top:0px; width:100%; height:31px; background-color:#4a4a4a; color:silver;} div#menubar input { color:silver; border:0px; padding:5px; background-color:#666;} div#menubar input:hover { background-color:#777;} div#menubar input:active { background-color:#444;} /* open image via url window */ .container { background-color:red;} /* open image via url window */ .darkoverlay { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6);} /* open image via url window */ .openurl { cursor:default; position:absolute; top:50%; left:50%; width:50%; height:auto; margin-left:-25%; margin-top:-12.5%; padding:10% 0px 10% 0px; border:2px dashed gray; background-color:#999;} /* right click menu */ .custom-menu { cursor:default; position:absolute; font-family:times new roman; font-size:13px; background-color:#f0f0f0; border:1px solid #979797; padding:2px; z-index:9;} .custom-menu input, .custom-menu button { border:0px; background-color:transparent;} .custom-menu input:hover, .custom-menu button:hover { background: rgb(237,241,247); /* old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(237,241,247,1) 51%, rgba(255,255,255,1) 100%); /* ff3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(51%,rgba(237,241,247,1)), color-stop(100%,rgba(255,255,255,1))); /* chrome,safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(237,241,247,1) 51%,rgba(255,255,255,1) 100%); /* chrome10+,safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(237,241,247,1) 51%,rgba(255,255,255,1) 100%); /* opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(237,241,247,1) 51%,rgba(255,255,255,1) 100%); /* ie10+ */ background: radial-gradient(ellipse @ center, rgba(237,241,247,1) 51%,rgba(255,255,255,1) 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#edf1f7', endcolorstr='#ffffff',gradienttype=1 ); /* ie6-9 fallback on horizontal gradient */} /* settings/properties window */ div.pinklayout { position:absolute; top:50%; left:50%; width:400px; height:300px; margin-left:-200px; margin-top:-150px; color:#fff; font-family:georgia!important; font-size:16px!important; font-weight:100; line-height:25px; background:#f3a0f6; background:-moz-linear-gradient(#f3a0f6, #720a4c); background:-o-linear-gradient(#f3a0f6, #720a4c); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f3a0f6), to(#720a4c));/* older webkit syntax */ background:-webkit-linear-gradient(#f3a0f6, #720a4c); filter:progid:dximagetransform.microsoft.gradient( startcolorstr='#f3a0f6', endcolorstr='#720a4c',gradienttype=0 ); box-shadow:inset 0 1px 2px #ffffff, 0 0 3px #999999; text-shadow:1px 1px 2px #000; border:1px solid #f3a0f6; border-radius:10px; padding:7px 20px 7px 20px; z-index:1;} a.menuheader { outline:none; cursor:default; text-decoration:none; color:#fff; font-size:26px!important; background:rgba(0, 0, 0, 0.5); box-shadow:inset 0 0 4px #000; border:0px; border-radius:10px; padding:7px 20px 7px 20px;} jquery/javascript
$('ul.filemenu, div.container, div.pinklayout, div.darkoverlay').hide(); $('div.container, div.pinklayout').draggable(); // file menubar $("input[name='ifile']").click(function() { $('ul.filemenu').toggle(); }); $("input[name='addimg']").click(function() { $('ul.filemenu').toggle(); alert("coming soon..."); }); $("input[name='addimgurl']").click(function() { $('ul.filemenu').toggle(); $('div.darkoverlay').fadein(); }); // container , properties $("div.container, canvas#mycanvas").dblclick(function() { $(this).fadeout(); }); $(".container").bind("contextmenu", function(event) { event.preventdefault(); $("div.custom-menu").hide(); $("<div class='custom-menu'><input id='propertz' type='button' name='propertz' value='settings'><br><input id='clozewidg' type='button' name='clozewidg' value='close widget'></div>").appendto("body").css({ top: event.pagey + "px", left: event.pagex + "px" }); init_prperty_click(),init_cloze_click() }).bind("click", function(event) { $("div.custom-menu").hide(); }); $('input[name="close"]').click(function() { $(".pinklayout").fadeout(); }); function init_prperty_click() { $("input[name=propertz]").click(function() { $("div.custom-menu").hide(); $("div.pinklayout").fadetoggle(); }); }; function init_cloze_click() { $("input[name=clozewidg]").click(function() { $("div.custom-menu").hide(); $("div.container").fadeout(); }); }; $("input[name='confirm']").click(function() { var widgw = $("input[name='width']").attr("value"); var widgh = $("input[name='height']").attr("value"); $(".container").width(widgw); $(".container").height(widgh); $("canvas#mycanvas").width(widgw); $("canvas#mycanvas").height(widgh); }); $("#camdesk-slider").slider({ min: 0, max: 1, step: 0.01, value: 1, orientation: "horizontal", slide: function(e,ui){ $('.container').css('opacity', ui.value)} }); // open image url $("input[name='confirmurl']").click(function() { var imgurlsrc = $("input[name='openurl']").val(); var imgw = $("input[name='imgwidth']").val(); var imgh = $("input[name='imgheight']").val(); $(".darkoverlay").fadeout(); $(".container").fadein(); $("body").append('<div class="container" width="' + (imgw) + '" height="' + (imgh) + '"><canvas id="mycanvas" width="' + (imgw) + '" height="' + (imgh) + '"></canvas></div>'); }); $('input[name="closeurl"]').click(function() { $(".darkoverlay").fadeout(); }); var images = {}; function loadimages(sources, callback){ var loadedimages = 0; var numimages = 0; (var src in sources) { numimages++; images[src] = new image(); images[src].onload = function(){ if (++loadedimages >= numimages) { callback(); } }; images[src].src = sources[src]; } } window.onload = function(){ var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); var sources = { mysrc: "http://www.google.com/images/srpr/logo4w.png" }; loadimages(sources, function(){ context.drawimage(images.mysrc, 0, 0, (imgw), (imgh)); }); };
that’s lot of code through!
will settle working simplified version of need? can plug more complicated structure.
first url , width, height in textboxes user.
var url=$("#url").val(); var w=parseint($("#width").val()); var h=parseint($("#height").val()); then resize canvas user’s width/height. notice must use canvas dom element, not jquery object.
canvas.width=w; canvas.height=h; finally, draw image resized canvas. can add few parameters context.drawimage , scale image fit in canvas.
context.drawimage(img, 0,0,img.width,img.height, 0,0,canvas.width,canvas.height); here’s code , fiddle: http://jsfiddle.net/m1erickson/kfeac/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); function draw(){ var w=parseint($("#width").val()); var h=parseint($("#height").val()); canvas.width=w; canvas.height=h; var img=new image(); img.onload=function(){ ctx.drawimage(img,0,0,img.width,img.height,0,0,w,h); } img.src=$("#url").val(); } $("#load").click(function(){ draw(); }); }); // end $(function(){}); </script> </head> <body> url:<input type="text" id="url"/><br/> width:<input type="text" id="width"/><br/> height:<input type="text" id="height"/><br/> <button id="load">load</button><br/> <canvas id="canvas" width=300 height=300></canvas> </body> </html> 
Comments
Post a Comment