1

ビュー内の画像をクリックして置き換えようとしています。私のコントローラーはバイト配列を返しますが、ビューは元の画像を空の画像に置き換えます。

ここに私のコントローラコードがあります:

        [HttpPost]
    public byte[] GetSelectedImage(string selectedImageId, string accountId, string courseId)
    {
        // Laden des Originalfotos
        var pictures = (from ga in _db.MyPhotos
                        where
                            ga.AccountId.Equals(accountId) &&
                            ga.CourseId.Equals(courseId) &&
                            ga.SortOrder.Equals(selectedImageId)
                        select ga.PhotoStreamOriginal.ToArray());
        var images = pictures.ToList();


        byte[] imageByteArray = images.First();
        return imageByteArray;
    }

そして、私がJavascriptで行っていることは次のとおりです。

     $('#makeMeScrollable img').live('click touchstart', function (event) {
        event.preventDefault();
        var selectedImage = $(this).attr('data-id');

        var selectedImageId = @Html.Raw(Json.Encode(Model.SelectedImageId));
        var accountId = @Html.Raw(Json.Encode(Model.AccountId));
        var courseId = @Html.Raw(Json.Encode(Model.CourseId));

        $.ajax({
            url: '@Url.Action("GetSelectedImage", "UploadPhoto")',
            dataType: 'text',
            data: {selectedImageId: selectedImageId, accountId: accountId, courseId: courseId},
            type: 'POST',
            success: function(data) {
                $('#OriginalImage').attr('src', "data:image/jpg;base64," + data);
                alert("data:image/jpg;base64," + data);
            }
        });
    });

アラートも発生しました、data:image/jpg;base64,System.Byte[]

私が間違っていることは何ですか？

助けてくれてありがとう

4

3 に答える 3

0

MVC4 を使用している場合は、さらに一歩進んで、すべての base 64 変換を削除することをお勧めします。FileStreamResult を効果的に使用できます。img src をコントローラ アクションに動的に設定するだけで (Url.Action のルート値を使用)、次のようになります (編集する必要があります。正確さをテストすることはできませんが、それはあなたに良い考えを与えるはずです）：

 $('#makeMeScrollable img').live('click touchstart', function (event) {
    event.preventDefault();
    var selectedImage = $(this).attr('data-id');

    var selectedImageId = @Html.Raw(Json.Encode(Model.SelectedImageId));
    var accountId = @Html.Raw(Json.Encode(Model.AccountId));
    var courseId = @Html.Raw(Json.Encode(Model.CourseId));

    $('#OriginalImage').attr('src', @Url.Action("GetSelectedImage", "UploadPhoto", new { selectedImageId = selectedImageId, etc }));

    // no need for this
    //$.ajax({
    //    url: '@Url.Action("GetSelectedImage", "UploadPhoto")',
    //    dataType: 'text',
    //    data: {selectedImageId: selectedImageId, accountId: accountId, courseId: courseId},
    //    type: 'POST',
    //    success: function(data) {
    //        $('#OriginalImage').attr('src', "data:image/jpg;base64," + data);
    //        alert("data:image/jpg;base64," + data);
    //    }
    });
});

[HttpGet]
public ActionResult GetSelectedImage(string selectedImageId, string accountId, string courseId)
{
    // Laden des Originalfotos
    var pictures = (from ga in _db.MyPhotos
                    where
                        ga.AccountId.Equals(accountId) &&
                        ga.CourseId.Equals(courseId) &&
                        ga.SortOrder.Equals(selectedImageId)
                    select ga.PhotoStreamOriginal.ToArray());
    var images = pictures.ToList();


    byte[] imageByteArray = images.First();
    return base.File(imageByteArray, "image/jpg");
}

リクエストを正しいアクションにルーティングするルートも設定する必要がありますが、それは簡単に理解できるはずです...

于 2013-08-24T12:25:09.707 に答える
0

バイト配列を返す代わりに、次のように base64 文字列を返す必要があります。

[HttpPost]
public string GetSelectedImage(string selectedImageId, string accountId, string courseId)
    {
        // Laden des Originalfotos
        var pictures = (from ga in _db.MyPhotos
                        where
                            ga.AccountId.Equals(accountId) &&
                            ga.CourseId.Equals(courseId) &&
                            ga.SortOrder.Equals(selectedImageId)
                        select ga.PhotoStreamOriginal.ToArray());
        var images = pictures.ToList();


        byte[] imageByteArray = images.First();
        return Convert.ToBase64String(imageByteArray);
    }

この記事をチェックアウトすると、完全なプロセスが示されますhttp://www.codeproject.com/Articles/201767/Load-Base64-Images-using-jQuery-and-MVC

于 2013-08-24T12:01:52.410 に答える