問題タブ [html5-canvas]

私はミニマリストの画像作成プロジェクトに取り組んでおり、サーバーで使用されるブラウザ内で画像を作成する機能が必要です。これまでのところ、この方法は私たちのニーズを満たしていますが、より便利な方法をCanvas.toDataUrl()知ったばかりです。Canvas.toBlob()

メソッドがtoBlob()仕様に追加されたのは数か月前のようです (いつ追加されたかについての直接的な参照は見つかりません)。

どのブラウザがサポートtoBlobしているか、さらに重要なことに、それらのブラウザのどのバージョンにメソッドの統合が含まれていましたか? さらに、この機能のサポートは「バグ」ですか、それとも主要なブラウザーで開発中ですか?

アップデート

私はこの質問を8年近く前にしました。メソッドのステータスに関する更新を待って、以前に言及したプロジェクトを提出しましたcanvas.toBlob()。toBlob()私が Web で収集できる情報によると、一部のブラウザーでは の実装が少しずつ使用されているようです。

canvas.toBlob()HTML5 キャンバス オブジェクトの統合を開始したブラウザーの間で、この方法はどの程度普及しているのか、また、このサポートを最初に統合したのはこれらのブラウザーのどのバージョンなのか、もう一度お尋ねします。

私はミニマリストの画像作成プロジェクトに取り組んでおり、サーバーにアップロードして使用する画像をブラウザ内で作成する機能が必要です。

キャンバスオブジェクトでtoDataUrl（）メソッドを呼び出すことにより、サーバーの画像データを作成することができました。具体的には、toDataUrl（'image / gif'）を呼び出して画像を作成しましたが、結果の画像はRLE圧縮されていません。toDataUrlメソッドに圧縮GIFを作成させる方法はありますか？

私は現在、HTML5 の canvas 要素を使用して実行されるアプリに取り組んでいます。次のようにサイズが変更されたときに、ウィンドウのサイズに合わせてキャンバスのサイズを変更するコードがあります。

ただし、誰かが画面のサイズを変更したときだけでなく、キャンバスを最初から完全にサイズ変更したいと考えています。何らかの理由で、上記のコードをコピーすると、またはに変更$(window).resizeする以外は、キャンバスがウィンドウのサイズに設定されません。$(window).load$(document).ready

私がやろうとしていることで、私が見ていない何かが間違っていると思う人はいますか、それともこれを達成する方法について他のアイデアがありますか?

よろしくお願いします、
サミ

編集：

ProcessingJS スケッチをキャンバスにロードしていることに注意してください。ロードにかかる時間が影響するかどうかはわかりませんが、これについては言及したほうがいいと思いました...

私はjQueryの初心者なので、目立った見落としをお詫びします。現在、特定のリンクがクリックされたときにjQuery Tools Overlayを使用して外部htmlをロードしているWebサイトがあります（http://flowplayer.org/tools/demos/overlay/external.html）。これは正常に機能します。

問題が発生しているのは、html5-canvasで描画しているオブジェクトがクリックされたときにオーバーレイをトリガーしようとしたときです。注：オブジェクトがクリックされたときの検出に問題はありません。発生している唯一の問題は、ポップアップのトリガーです。

次のコードは、私が現在divを外部ページで埋めるために使用しているものです。リンクに固有ではないようにするために、誰かが私を正しい方向に向けることができるかどうか疑問に思いました。

ありがとう！

更新：私が最終的に得た解決策は、プログラムによるデモで説明されているとおりでした。ターゲットdivをオーバーレイに変換し、loadをtrueに設定します。外部htmlをロードするには、上記の「onBeforeLoad」関数の内臓を保持するだけです。

を使用してマインド マップを作成するためのコード サンプルを Web で検索しました<canvas>。infoVis ツールキットのサンプルでは、​​マインド マップにダイレクト json が使用されていることがわかりました。事前に構築されたjsonがあり、必要な形式(id、childrenなど)に変換するのに問題があります。

私が必要としているのは、アイテムの階層を視覚化のようなマップに変換する方法です。ヘルプ/ヒントをいただければ幸いです

私は HTML5 を学んでいますが、arc で行き詰っています。

構文

この startAngle,endAngle を完全に取得していません。この 2 つのパラメーターを計算して、さまざまな種類の円、円弧を描画する方法を教えてください。

こんにちは、事前に助けてくれてありがとう。私はphonegapアプリを書いていますが、アスペクトを失ったり、誤って画像をトリミングしたりせずに写真を縮小することはできません. 以下の関数の「imageData」は、カメラが撮影した写真の 64 ビット文字列です。私のページのキャンバスに画像を描くことはできますが、写真が横向きに撮られた場合、それは一緒に砕かれます. scale 関数または drawimage 関数を使用して拡大縮小しない場合、写真の上隅のみが取得されます。例: onPhotoDataSuccess 関数で画像の幅が 1296 ピクセル、高さが 968 ピクセルであることを示す写真を撮りました。しかし、iPhone 上の私のキャンバスは幅 272 ピクセル (ポートレート モード) です。私はウェブ上でさまざまなスケーリング方法を試しましたが、これが最も近いようです。私は何を間違っていますか？

Chrome で、globalCompositeOperation を使用してシェイプとテキストをマスク/ブレンドしようとしたときに問題が発生しました (シェイプ マスク/他のシェイプとのブレンドは問題なく動作します) (より具体的には、Chrome 12.0.7 を使用しています)。ここで迷子になった可能性がある場所を提案したり、キャンバス要素内で回避策を提案したりできますか?

ここに私が見ているものを示す画像があります: http://i.stack.imgur.com/wRunv.jpg

これらの結果を再現するコードは次のとおりです。

キャンバス (Chrome 12) からピクセル データを取得できないようです。私は何を間違っていますか？

完全な例。私のコンソールログはすべてゼロになります。黒と白のピクセルが混在していると思います。

明確化: ピクセル データを正しく取得できることをテストするために、黒い四角を描いています。255, 255, 255私はいくつか（白）といくつか0, 0, 0（黒）を期待しています。白いピクセルデータしか取得しません。

clearRectを使用して、drawImageを使用してキャンバスに描画されたpng画像の一部を削除することはできますか？

私はこのようなことを試みていますが、機能していません：

次に、clearRectを使用してマウスで消去します。消去は、drawLineを使用してキャンバスに追加されたストロークでは機能しますが、drawImageを使用した画像では機能しません。背景が単色ではないため、単色を描画するのではなく、clearRectにする必要があります。これを行うことは可能ですか？