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

hier 是我在我的 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

1

This allows you to just get the image data and set to the img src, which is cool.

var oReq = new XMLHttpRequest();
oReq.open("post", '/somelocation/getmypic', true );        
oReq.responseType = "blob";
oReq.onload = function ( oEvent )
{
    var blob = oReq.response;
    var imgSrc = URL.createObjectURL( blob );                        
    var $img = $( '<img/>', {                
        "alt": "test image",
        "src": imgSrc
    } ).appendTo( $( '#bb_theImageContainer' ) );
    window.URL.revokeObjectURL( imgSrc );
};
oReq.send( null );

The basic idea is that the data is returned untampered with, it is placed in a blob and then a url is created to that object in memory. See here and here. Note supported browsers.

于 2013-10-30T11:41:55.297 回答
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 回答
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 回答