Question

我试图通过点击替换视图中的图像。我的控制器返回一个字节数组，但视图用空的替换原始图像。

这是我的控制器代码：

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

警报也只拍摄，数据：image / jpg; base64，System.Byte []

知道我做错了吗？

谢谢你的帮助

Answer 1

这允许您只获取图像数据并设置为img src，这很酷。

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

基本思想是数据返回未被篡改，它被放置在blob中，然后在内存中为该对象创建一个url。请参阅here和here。注意支持的浏览器

Answer 2

您需要返回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

Answer 3

如果您正在使用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");
}

请注意，您还需要设置路由以将请求路由到正确的操作，但这应该很容易理解......

MVC4 - Ajax请求Image ByteArray不起作用

3 个答案: