HTML5画布不通过休息服务返回渲染图像

Question

我正在尝试在HTML画布上绘制从休息服务中检索到的图像。虽然一切都运行成功，控制台日志打印得很好但没有任何图像不会在画布上绘制。 这是我的休息服务 -

 @Controller
 public class HomePicture {

 @Autowired
 ServletContext context; 

@RequestMapping(produces = MediaType.IMAGE_JPEG_VALUE,
        value = "/Home", method = RequestMethod.GET)
public @ResponseBody byte[] getPicture() throws IOException
{
    InputStream in = context.getResourceAsStream("/WEB-INF/images/marina.jpg");
    return IOUtils.toByteArray(in);
}

}

以下是我的html里面的脚本，我正在使用这张图片 -

     function getData() {
            $.ajax({
            url: "http://localhost:8080/showcase/Home",
            type: "GET",
            dataType : "text",
            success: successFn,
            error: errorFn,
            complete: function( xhr, status ) {
            console.log("The request is complete!");
             }
            });
          }

          function successFn(result) {
            console.log("Setting result ");

            var canVas = document.getElementById("drawingCanvas")
            var ctx = canVas.getContext("2d");
            var img = new Image;
            img.onload = function() {
                    ctx.drawImage(img,10,10);
            }
            img.src = result;