1

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

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

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 等。

感谢您的时间。

4

0 回答 0