タイトルが示すように、クライアント側にのみ存在する画像を .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 などに変換する方法がわかりません。
お時間をいただきありがとうございます。