7

コードの下のhttp://jsfiddle.net/UmJtB/18/を確認してください

<script type="text/javascript">
$(document).ready( function() {
$(".uploadphoto").click(function() {
    if(document.getElementById('files').files.length == 0){
      alert('Select an Image first');
      return false;
      }else {
         // When upload button is pressed, load the Popupbox First
       loadPopupBox();
              }
        $('#popupBoxClose').click( function() {           
            unloadPopupBox();
        });

        $('#container').click( function() {
            unloadPopupBox();
        });

        function unloadPopupBox() {    // TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#container").css({ // this is just for style       
                "opacity": "1" 
            });
        }   
        function loadPopupBox() {    // To Load the Popupbox
            $('#popup_box').fadeIn("slow");
            $("#container").css({ // this is just for style
                "opacity": "1.5" 
            });        
        }  
    });

//$('.FieldRequired').attr('id','files');
// set up variables
var reader = new FileReader(),
    i=0,
    numFiles = 0,
    imageFiles;

// use the FileReader to read image i
function readFile() {
    reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {

    // make an image and append it to the div
    var image = $('<img>').attr('src', e.target.result);
    var imgdiv = $('#popup_box');
    $(imgdiv).append(image);
 // if there are more files run the file reader again
    if (i < numFiles) {
        i++;
        readFile();
    }
};
$(".uploadphoto").click(function() {

    imageFiles = document.getElementById('files').files
    // get the number of files
    numFiles = imageFiles.length;
    readFile();           

});

$(function(){

    $('#popup_box img').Jcrop({
        onChange: showPreview,
        onSelect: showPreview,
        aspectRatio: 1
    });

});
function showPreview(coords)
{
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $('#preview').css({
        width: Math.round(rx * 500) + 'px',
        height: Math.round(ry * 370) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
}


});
</script>
</head>
<body>
<input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box"> <!-- OUR PopupBox DIV--> 
<canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>  
<a id="popupBoxClose">close</a> </div>
<div id="container"> <!-- Main Page --> 

</div>
</body>
</html>
<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
    display:none; /* Hide the DIV */
    position:fixed;
    _position:absolute; /* hack for internet explorer 6 */
    height:600px;
    width:600px;
    background:#FFFFFF;
    left: 300px;
    top: 150px;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px;
    /* additional features, can be omitted */
    border:2px solid #ff0000;
    padding:15px;
    font-size:15px;
    -moz-box-shadow: 0 0 5px #ff0000;
    -webkit-box-shadow: 0 0 5px #ff0000;
    box-shadow: 0 0 5px #ff0000;
}
#popup_box img {
    height:600px;
    width:600px
}
#container {
    background: #d2d2d2; /*Sample*/
    width:100%;
    height:100%;
}
a {
    cursor: pointer;
    text-decoration:none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
    background: url("close.png") no-repeat scroll 0 0 transparent;
    color: transparent;
    font-size: 20px;
    line-height: 26px;
    position: absolute;
    right: -28px;
    top: -14px;
}
</style>

ポップアップで画像をアップロードしていますが、その画像をトリミングしたいので、JCrop を使用しました。しかし、それは私のために働いていません.私はそのポップアップのキャンバスにその画像を表示したい.私を助けてください..私はこのエラーが発生しています PM エラー: NS_ERROR_INVALID_POINTER: コンポーネントが失敗コードを返しました: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader.readAsDataURL]前もって感謝します！

4

1 に答える 1

3

働くフィドル

JS の変更点

reader.onloadend = function (e) {

    // make an image and append it to the div
    var image = $('<img>').attr('src', e.target.result);
    var theImage = new Image();
    theImage.src = e.target.result;
    var imageWidth = theImage.width;
    var imageHeight = theImage.height;
    var imgdiv = $('#popup_box');
    $(imgdiv).append(image);
    image.Jcrop({
        /*onChange: function(coords){showPreview(coords, image);}, */
        onSelect: function(coords){showPreview(coords, image, imageWidth / image.width(), imageHeight / image.height());},
        aspectRatio: 1
    });
    // if there are more files run the file reader again
    if (i < numFiles) {
        i++;
        readFile();
    }
};

と

function showPreview(coords, image, width_scale, height_scale) {        
        var c=document.getElementById("preview");
        var ctx=c.getContext("2d");
        var img=image[0];
        if(coords.w > 0 && coords.h > 0)
            ctx.drawImage(img,coords.x * width_scale,coords.y * height_scale,coords.w * width_scale, coords.h * height_scale, 0 , 0, 300, 150);        
    }

まず、onloadend 関数内にロードされている各画像に Jcrop プラグインを追加しました。また、canvas はレンダリングされた html 画像ではなく生の画像を処理するため、画像がどれだけスケーリングされたかを計算する必要があります。キャンバスの描画は、onChange イベントが発生するたびに実行するにはコストがかかりすぎる可能性があるため、onChange コールバック関数を削除しました。

showPreview コールバックが変更され、Jcrop から渡された座標、トリミングされている画像、およびその画像の倍率を受け取るようになりました。

于 2013-08-28T13:30:00.800 に答える