将图像动态添加到可缩放画布上答案

【问题标题】：Dynamicly Add Image Onto Moveable Canvas将图像动态添加到可缩放画布上
【发布时间】：2013-05-06 02:47:54
【问题描述】：

我正在尝试从文本框添加图像，通过文本框调整宽度和高度，当我点击确认时将这些值添加到新画布中。我以为我知道自己在做什么，但显然我不会因为简单的事情而烦恼。想知道是否有人可以帮助我。

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 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/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 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));
    });
};

【问题讨论】：

标签： image html5-canvas add dynamically-generated movable

【解决方案1】：

有很多代码需要通过！

您会满足于您所需要的工作简化版本吗？然后你可以将它插入到你更复杂的结构中。

首先从用户那里获取文本框中的 URL 和宽度、高度。

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

然后将画布的大小调整为用户的宽度/高度。请注意，您必须使用 canvas DOM 元素，而不是 jquery 对象。

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

最后，将图像绘制到调整大小的画布中。您可以向 context.drawImage 添加一些额外的参数，它会缩放图像以适合画布。

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

这是代码和小提琴：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>

【讨论】：