Question

正如标题所说，我正在尝试将仅存在客户端的图像发送回.net服务器。我正在使用一些非常简单的函数来实现这一目标。我创建和查看图像没有问题，但我找不到允许我将此图像发布到服务器的解决方案。我正在使用的功能包括在下面。如果需要额外的代码，我很乐意提供。

因此，第一个函数按照我找到here的示例创建图像。

function createImage() {

var canvas = $('<canvas></canvas>')
        .attr("id", "image-canvas-for-upload-to-server");

var ctx = canvas[0].getContext("2d");

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='"+ width + "' height='" + height + "'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml'>" +
                "<body>" +
                    $(".html-for-image").html() +
                "</body>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";

var DOMURL = self.URL || self.webkitURL || self;

var svg = new Blob([data], { type: "image/svg+xml;charset=utf-8" });

var url = DOMURL.createObjectURL(svg);

var img = new Image();

img.src = url;

img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};

return img;

此功能有效。问题产生于仅在本地存在的图像。如果我“检查元素”并查看我的资源，我可以在那里看到图像。我还可以获得有关图像的一些信息。

    Dimensions: 42 × 42
    File size: x.xxKB
    MIME type: image/svg+xml
    URL: blob:http://localhost:port/5d9f0874-a2c6-4fa7-bdcb-6869c29b5077 (this guid-like path is always different)

第二个函数尝试将图像发送到服务器。但是，我一直在找不到解决方案。我正在运行.net mvc服务器。

    function sendEmail(text, image) {
    $.post("http://localhost:port/email/send",
    {
        fromEmailAddress: "sender@example.com", 
        toEmailAddress: "recipient@example.com",
        subject: "look at this image!",
        messageBody: text,
        image: image
    });

}

我已经尝试序列化Image（）对象，.stringify（），发送svg，发送blob，调用canvas.toDataURL（）[但它抛出一个安全错误]，发送原始html以便我可以在电子邮件中呈现html，然后用户可以下载或截图，我也尝试了其他几个，但都没有成功。

如果有人能指出我将这个图像发回服务器的正确方向，那就太棒了。

此外，我不知道如何在客户端将此Image（）对象转换为png，jpeg，base64等。

感谢您的时间。

无法将客户端Image（）对象（使用canvas和jquery创建）发送到.net服务器

0 个答案: