0

javascriptがそのようなアクセスを許可されていないため、セキュリティ上のリスクにより、フォルダーから画像をサーバーにアップロードできないという多くの投稿を読みました。ただし、Web サイト上にある svg 画像を Web サイト上で png に変換する状況があります。しかし、変換した画像をサーバーに送信したいと考えています。

ドキュメントからアップロードする場合と同じ問題が発生しますか?

jsfiddle の例を作成しようとしましたが、document.writeうまく受け入れられないようです。

デモ: jsfiddle

理想的には、ボタンを次のように定義します。

<button id="image" onClick="image()">Convert & Send</button>

次に、ajax とともに関数内で変換を行うコードを用意します。

function image() {
    //conversion code & ajax
}

結論として、これが可能かどうかを知りたいのですが、そうでない場合は、別の方法を示していただければ幸いです.phpの組み合わせが含まれている可能性があります.

前もって感謝します

フィドルがスニペットをロードしていないようです: 変換の

   function image () { 

         var svg = document.getElementById("svg-container").innerHTML.trim();
         var canvas = document.getElementById('svg-canvas');
         canvg(canvas, svg, { renderCallback: function () {
        var img = canvas.toDataURL("image/png");
       document.write('<img src="'+img+'"/>');
      }
   });
4

2 に答える 2

0

はい、もちろんそれらは方法です：
私は知っています2：
1-（これはChromeとFirefoxで動作することは知っていますが、IEは知りません）：
最初にキャンバス内の画像のBase 64データを取得します： 

<canvas id="Canv" ....(Other Attributes)>
Your Browser does not support the canvas element :(
</canvas>
<button type="button" OnClick="Image()">Transform and Save</button>
<script type="text/javascript>
var can =document.getElementById('Can');
var ctx = can.getContext("2d");
//do something with ctx
function image(){
//You Should check the real format using img.src
var data = can.toDataURL("image/png");
var array = data.split(".");
var Base64Data = array[1];
//Now step 2 :Sent it to PHP
//Check for Browser compatibly
var ajx = new XmlHttpRequest()
ajx.onreadystatechange=function()
{
if (ajx.readyState==4 && ajx.status==200)
{
if(ajx.ResponseText == "Err"){//if the paged returned error
alert("An error Has Occurred");
return;
}//if not
alert("Saved Succesufuly");
}
}
ajx.open("GET","Save.php?q=" + Base64Data , true);
}

</script>

Step3: PHPで解釈する

<?PHP
if(isset($_GET['q] And !Empty($_GET['q'])){
try {
$Data = $_GET['q'];
$hndl = fopen("Saved/Pic1.jpg" , "w");
fwrite($hndl , $Data);
fclose($hndl);
}catch(Exception $err){
echo "Err";
}
}else {
echo "Err";
}
?>

Yeap And That it.:D
そのディレクトリ内の各ファイルをループして、Base64 値を取得するロード ボタンを作成することもできます。

于 2013-07-03T18:45:44.720 に答える