12

.todataurlを使用してキャンバス全体を問題なくキャプチャできます。しかし、キャンバスの一部だけをキャプチャしてそれを画像に保存する方法があるかどうかはわかりません。

ei Mr. Potatoheadスクリプトは、帽子、手足の顔などをキャンバス全体に混ぜて描画し、キャンバスの中央にあるMr.Potatoにドラッグアンドドロップできます。ボタンを押すと、ジャガイモさんの画像がjpgにすべて見栄えよく表示されます。画像に余分な帽子/足/顔がない。

私が読んだすべてのことからすると、これは不可能であるという事実に私は辞任しました。しかし、皆さんはグーグル（または私の手にある少なくともグーグル）よりも賢いことが数回証明されているので、私は写真を撮っています。

申し訳ありませんが、今回投稿するコードはありません...これが必要な場合を除きます。

var canvas  = document.getElementById("mrp");
var dataUrl = canvas.toDataURL();

window.open(dataUrl, "toDataURL() image", "width=800, height=600");

しかし、それは私が取り組んでいるdataurlの単なる例です..そしてそれはmrpotatoだけをキャップしないという事実の外で機能します

私のフォールバックは、画像をphpに渡し、そこで使用して、不要なものをすべて切り取り、それを返すことです。

編集

tmcwにはこれを行うためのメソッドがありました。それが行われるべき方法であるかどうかはわかりませんが、それは確かに機能します。

document.getElementById('grow').innerHTML="<canvas id='dtemp' ></canvas>";
var SecondaryCanvas  = document.getElementById("dtemp");
var SecondaryCanvas_Context = SecondaryCanvas.getContext ("2d");
SecondaryCanvas_Context.canvas.width = 600;
SecondaryCanvas_Context.canvas.height = 600;
var img = new Image();
img.src = MainCanvas.toDataURL('image/png');
SecondaryCanvas_Context.drawImage(img, -400, -300);
var du = SecondaryCanvas.toDataURL();
window.open(du, "toDataURL() image", "width=600, height=600");
document.getElementById('grow').innerHTML="";

growは空のスパンタグ、SecondaryCanvasはこのためだけに作成された変数ですSecondaryCanvas_Contextは、Mr。PotatoHead drawImageを含むメインキャンバスの.toDataURL（）を格納するためだけに作成されたSecondaryCanvas imgのgetcontextであり、画像を移動するための負の（-）オフセットがありますMainCanvasの、必要な部分だけが表示されるようにします。次に、作成したばかりの新しいキャンバスにキャップを付け、.pngで新しいウィンドウを開きます。

で、スクリプトからセキュリティエラー18というエラーが発生した場合は、コピーして貼り付けた残りの変数を使用してimgTopの名前をimgに変更するのを忘れたため、そのようなローカルコンテンツイメージを保存しようとするとchromeが気に入らないためです。

4

4 に答える 4

11

オフスクリーンキャンバスを使用する方法は次のとおりです。

var canvas = document.createElement('canvas');
canvas.width = desiredWidth;
canvas.height = desiredHeight;
canvas.getContext('2d').drawImage(originalCanvas,x,y,w,h,0,0,desiredWidth, desiredHeight);
result = canvas.toDataURL()
于 2017-04-11T06:41:34.697 に答える
10

特定のサイズの新しいCanvasオブジェクトを作成し、drawImageを使用してキャンバスの特定の部分を新しいキャンバスの特定の領域にコピーし、新しいキャンバスでtoDataURL（）を使用します。

于 2012-12-24T05:34:41.093 に答える
1

画像の一部を抽出するもう少し効率的な（そしておそらくよりクリーンな）方法：

// x,y are position in the original canvas you want to take part of the image
// desiredWidth,desiredHeight is the size of the image you want to have
// get raw image data
var imageContentRaw = originalCanvas.getContext('2d').getImageData(x,y,desiredWidth,desiredHeight);
// create new canvas
var canvas = document.createElement('canvas');
// with the correct size
canvas.width = desiredWidth;
canvas.height = desiredHeight;
// put there raw image data
// expected to be faster as tere are no scaling, etc
canvas.getContext('2d').putImageData(imageContentRaw, 0, 0);
// get image data (encoded as bas64)
result = canvas.toDataURL("image/jpeg", 1.0)
于 2020-03-18T21:44:08.280 に答える
-3

toDataURL関数にleft、top、width、Heightパラメーターを指定できます。これは、キャンバス上のオブジェクトに応じてデータ画像を取得するためのコードです。

mainObj = "your desired Object"; // for example canvas._objects[0];

var image   = canvas.toDataURL({ left: mainObj.left, top:mainObj.top,
    width: mainObj.width*mainObj.scaleX, height: mainObj.height*mainObj.scaleY});
于 2016-09-06T13:10:02.700 に答える