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)

2 番目の関数は、イメージをサーバーに送信しようとします。しかし、私は解決策を見つけることにひどく失敗しました。.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