0

我正在尝试构建一个小工具，使我能够拍摄图像，在其上放置 PNG 透明蒙版，然后缩放并拖动图像以使其在蒙版中完美定位/调整大小。

这是jquery。

$(window).load(function(){
var globalElement_width;
var globalElement_height;
$(document).ready(function(){
$img=$('.canvas img');
globalElement_width=$img.width();
globalElement_height=$img.height();

$( ".slider" ).slider({
    step: 1, 
    min: 0,
    max: 100,
    value: 0,
    slide: function( event, ui )
    {
        resize_img(ui.value);
    }
});

$('.canvas img').draggable();

});
function resize_img(val) {
var width=globalElement_width;
var zoom_percen=width * 0.5; // Maximum zoom 50%
var ASPECT = zoom_percen / 50;
var zoom_value = val / 2;
var size= width + ASPECT * zoom_value;

$img = $('.canvas img');
$img.stop(true).animate({
    width: size
}, 1);
}

});

我有 2 个问题（除了代码可能很笨拙）

  1. 我希望图像最初以实际大小居中加载到遮罩后面，并让滑块允许缩放更小，而不是像我现在拥有的那样更大。我想确保图像永远不会超过其实际尺寸以避免失真。滑块应该向左滑动，表示尺寸减小，而不是向右滑动。

  2. 一旦我得到正确的位置，我希望能够单击一个按钮，然后为新调整大小和定位的图形输出新的 HTML/CSS/JS。然后我可以把这段代码放到一个站点中并显示图像和蒙版，而无需任何 UX 来调整大小/位置/等。只是在我生成的确切状态下硬编码。

非常感谢任何帮助......这是我可以将各种代码拼凑在一起的情况。此外，鼓励有关清理我所拥有的建议。

谢谢！

4

1 回答 1

0

我有一个伙伴帮助我（感谢 Yadid！）。

/*
this function returns the HTML of an object (same as object.html() - but with the wrapping       element too)
*/
$.fn.outerHTML = function(){

// IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning
return (!this.length) ? this : (this[0].outerHTML || (
  function(el){
      var div = document.createElement('div');
      div.appendChild(el.cloneNode(true));
      var contents = div.innerHTML;
      div = null;
      return contents;
})(this[0]));

}

function saveEverything(){
var html = $('.canvas').outerHTML();
    alert(html);
    //Save "html" somewhere    
}


$(window).load(function () {
    var globalElement_width;
    var globalElement_height;
    $(document).ready(function () {
        /*
        the problem was that you were trying to get the size of the image before the image was actually loaded
        - which returns wrong dimensions (the image is not there yet, so javascript can't get the width/height of the photo)

    to solve it, we first need to initialize the image tag before we do anything -  
    we can do that by loading a blank image to it - "about:blank" (a 'blank' URL)                

    then bind to the img tag's "load" event - this event is fired after the photo is loaded and fully rendered
    - once you get this event, you can read the dimension of the image

    then,after we bind to the event, we can load the actual photo.
    we do that by changing the "src" attribute of the <img> tag to the URL of the image you want to load        
    */
    $img = $('.canvas img').bind("load",function(){
        globalElement_width = $img.width();
        globalElement_height = $img.height();
        $(".slider").slider({
            step: 0.01, /* Changed from 0 to 100, to 0 to 1, with 1% steps (ie 0.01) . this will make the calculations easier */
            min: 0,
            max: 1,
            value: 1,
            slide: function (event, ui) {
                resize_img(ui.value);
            }
        });

        //now that we have the right dimension, we can center the image 
        center_img();

        $('.canvas img').draggable();
    });
    $img.attr("src","http://media-cache-ec4.pinimg.com/736x/42/07/08/420708fc70c76f89c07bc93d13e6c479.jpg");
});

function center_img(){
    //get the size of the canvas, substract the size of the image then divide by 2 which center it
    var c = $('.canvas');
    var l = (c.width() - c.find('img').width())/2;
    var t = (c.height() - c.find('img').height())/2;            

    c.find('img').css({position:"absolute", top:t, left:l});    
}
// the val will be anywhere between 0 to 1, so we just need to multiply that number with the original size of the image
function resize_img(val) {

    // we get size of container so image wont be smaller than container
    var w = $('.canvas').width();

    // then use Math.min and Math.max, which return the minimum and maximum between 2 numbers
    $('.canvas img').stop(true).animate({
        width: Math.max(w, globalElement_width * Math.min(1,val))
    },1, function(){
        center_img();
    });
}

}); //]]>
于 2013-04-25T20:45:46.420 回答