는이 동적으로 내가 텍스트 상자를 통해 폭과 높이를 조절 텍스트 상자에서 이미지를 추가하기 위해 노력하고있어

Question

http://jsfiddle.net/ZQ99r/

이동식 캔버스에 이미지를 추가하고 나는 새로운 캔버스에 그 값을 추가 확인 쳤을 때. 나는 내가하고있는 일을 알고 있다고 생각했지만, 분명히 나는 ​​단순한 것에 짜증이 난다. 누군가 나를 도울 수 있는지 궁금해하고 있었다.

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 t을 얻기 위해 많은 코드가 있어요

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 at 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와/자바 스크립트

$('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 and 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; 
    for (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)); 
    }); 
}; 

Answer 1

골짜기!

필요한 단순화 된 버전으로 해결할 의향이 있습니까? 그런 다음 더 복잡한 구조로 연결할 수 있습니다.

먼저 사용자의 텍스트 상자에 URL과 너비, 높이를 가져옵니다.

var url=$("#url").val(); 
var w=parseInt($("#width").val()); 
var h=parseInt($("#height").val()); 

그런 다음 캔버스의 크기를 사용자의 너비/높이로 조정하십시오. jquery 객체가 아닌 캔버스 DOM 요소를 사용해야한다는 점에 유의하십시오.

canvas.width=w; 
canvas.height=h; 

마지막으로 크기가 조정 된 캔버스에 이미지를 그립니다. context.drawImage에 몇 가지 추가 매개 변수를 추가 할 수 있으며 캔바스에 맞게 이미지의 크기를 조정합니다. 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> 

:

context.drawImage(img, 0,0,img.width,img.height, 0,0,canvas.width,canvas.height); 

는 다음 코드와 바이올린의