キャンバスを画像のみ表示領域として保存する

キャンバスから画像を保存しようとしていますが、画像のサイズを変更したり、キャンバスの一部にエフェクトを追加したりしてキャンバスの画像を保存することはできません。私はjavascriptや何か私はからの画像が、同じことをここにキャンバスを画像のみ表示領域として保存する

var canvasData = canvas.toDataURL("image/png"); 
var postData = 'canvasData='+canvasData; 
var ajax = new XMLHttpRequest(); 
ajax.open('POST','http://localhost/canvas/imagesaver.php',true); 
ajax.setRequestHeader('Content-Type', 'canvas/upload');

を保存するためにjQueryとPHPを使用しています

は、私がしようとしているものですかPHPでそれであるものは何でもキャンバスの唯一の目に見える部分を保存することができます今すぐ行う

http://jsfiddle.net/BPmb5/1/

出典

2011-12-17 r1400304

使用 'canvas.viewport（0、0、キャンバス上のコードを使用します.width、canvas.height） ' – noob

保存する前に、PHPを使用してサーバー側で画像を切り抜くことができます。 Div "Box"の高さと幅を送信し、GDを使用して画像を切り抜くために使用します。 ' //新しい幅と高さで新しい画像を作成します。 $ dest = imagecreatetruecolor（$ boxWidth、$ boxHeight）; ' – Gaurav

のみクライアントソリューション：

が正しいサイズの第二のキャンバスを作成（または、あなたのページからhiddon 1のサイズを変更するかもしれません）
が第二のキャンバスctx.drawImage（canvas1のキャンバスコンテキスト機能を使用し、 SX、SY、SW、SH、DX、DY、DW、DH）
あなた.toDataURL（ "画像/ PNG"）は、第2のキャンバス

出典

2013-08-10 19:03:20 bitluni

キャンバスを画像のみ表示領域として保存する

答えて

関連する問題