問題タブ [todataurl]

現在、jpegに変換したcanvas.todataurlがあります。私のウェブサイトのユーザーが画像を保存して送信ボタンに使用できるようにしたいと思います。どうすればそれができるかについての提案。

https://jsfiddle.net/1gf6xzyz/3/ はフィドルへのリンクです。JS コードの重要なポイントを、何を試しているかを示します。

22行目：クロッパーを画像オブジェクトにアタッチする場所です。クロッパーは、わかりやすい名前を持つ画像とオプションへの参照を取るクラスです。重要なものは次のとおりです。

• ratioDim - トリミング ウィンドウの縦横比。

• maxCaptureWidth - トリミングできる画像の最大幅。

  /li>

トリミング ライブラリは 47 行目から始まります。必要に応じて既存のライブラリを調整しました。

行 357 - これは、画像が読み込まれた後にクロッパーが画像にアタッチされる場所です。発生する変換は、358 から 386 にリストされています。

574 行目 - この関数の最初の部分は、指定された「maxCaptureWidth」に従って画像の最大寸法を設定しようとします。関数の残りの部分は、画像に対するトリミング領域の左上と右下の座標を計算します。

656 行目から 658 行目 - これらは、イメージをキャンバスにキャプチャするための主要な関数です。selArea は、キャンバスに描画される領域です。

758 行目 - クロッパーの幅を取得するユーティリティ。

768 行目 - クロッパーの高さを取得するユーティリティ。

1170 行目 - 描画領域は、クロッパーがサイズ変更または移動された場合に呼び出されることが保証されている関数です。現在のクロッパーの位置に従って、イメージ オーバーレイにスタイルを適用します。

1230 行目 - キャンバスへの描画機能はここから始まります。この部分は、IE と Chrome の両方で正常に動作します。Firefox では、クロッパーの左上が画像の左上と一致する場合にのみ機能します。また、クロッパーを上下または左右に動かすと、キャプチャーされた画像が歪みます。コンテキストの drawimage 関数に渡されるパラメーターを徹底的にチェックしましたが、問題はありません。

行 1252 - トリミングされた画像を dataurl として抽出し、フォーム送信時に ajax を使用してサーバー側に送信し、画像バイトを s3 にアップロードします。

Firefox で動作しない理由がわかりません。助けていただければ幸いです。ご検討いただきありがとうございます。

キャンバス データから画像情報を抽出し、.png ファイルに表示しようとしています。これまでのところ、toDataURL() メソッドを使用してキャンバスから Base64 情報を抽出し、blob オブジェクト (.png 画像として正しく識別されます) を作成できましたが、画像は常に空白です。助言がありますか？これがコードです

興味深いことに、サイズは正しいです。欠けているのは、.png 内の実際の画像だけです。

canvas.dataURL() メソッドを呼び出して、キャンバスを dataURL に変換しようとしています。サイズが 938x657 の一部の画像では正常に動作していますが、大きな画像サイズ (3750x2625、7500x5250 など) で同じ機能を試すと、「data:」が返されます。

コード：

提案/解決策はありますか？

toDataURL()2 つのファブリック キャンバスを取得し、それら 2 つのキャンバスを結合した画像を配置して出力するにはどうすればよいですか? draw を使用しようとしましたが、取得できません。

私は、ユーザーがいくつかの画像を作成してサーバーに送信できる、WeChat プラットフォーム用の JavaScript で記述された小さな webapp を持っています。

画像の作成は Canvas2D を使用して行います。

canvas.toDataURL(type,quality) から受信した画像データ文字列を使用してサーバーに画像を送信すると、サーバー PHP スクリプトは、webapp から受信したサーバー側でバイナリ JPG ファイルを作成します。

私が試したすべての電話 (Samsung S3/4/5、Xiaomi、Huawei Honor、Lenovo、Nexus 4/5、iPhone 4S/5/5S/6/6S、iPads...) で問題なく動作します。 . クライアントの Samsung Note 2 を除きます。

彼らのデバイスは、私の Android フォンと同じように、Android 4.3 と最新の WeChat (6.2.6) を実行しています。ただし、写真を提出すると、ファイルサイズは 6 ～ 7 倍大きくなります。

確認したところ、実際に受け取ったファイルはJPGではなくPNGです。

Canvas2D 画像から画像データ文字列を取得するために使用するコードは次のとおりです。

このデータ文字列を受け取る PHP スクリプトを設定して、ログ、ヘッダーの内容、受け取った文字列のサイズなどを書き留めました。 JavaScript コードでは「image/jpeg」に設定されています。

これは、png ヘッダーと大きなデータ サイズを示すログです: http://snag.gy/ma39y.jpg

jpg ヘッダーと通常のデータ サイズを示すログは次のとおりです: http://snag.gy/enPvZ.jpg

私は困惑しています、私は何を間違えましたか？仕様を確認したところ、toDataURL は Android 3.4 以降でサポートされているはずです

ブラウザは PNG をサポートする必要がありますが、他の形式をサポートする必要はなく、提供された型が認識されない場合は PNG を返すという 2011 年の仕様を見つけました: http://www.w3.org/TR/ 2011/WD-html5-20110405/the-canvas-element.html#dom-canvas-todataurl

とはいえ、2015年というWebGLやモバイルの時代を考えると、自分にできることは何もないとは思えません。

誰にも解決策がありますか？高く評価！！！

svg を取得して (svg を作成する Chart プラグインから) png として保存したいのですが、これを達成する方法を見つけたと思いました...

オンロード関数が起動しない理由を調べてきましたが、以下のコードが機能しない理由をまだ理解できません。こんにちはは表示されません。それはおそらく非常に単純ですが、私は今それを見ることができません...

アップデート

オンロードをに変更しましたが、うまくいったようです...

しかし、今別の問題と私はこのエラーを取得します:

Uncaught InvalidStateError: 「CanvasRenderingContext2D」で「drawImage」を実行できませんでした: 提供された HTMLImageElement は「壊れた」状態です。

UPDATE2 コンソールで生成されたデータ文字列をクリックしようとすると：

コンソールで次の文字列を取得します。

ブラウザのこのエラー：

このページには次のエラーが含まれています:

行 1 の列 1 のエラー: ドキュメントが空です 以下は、最初のエラーまでのページのレンダリングです。

UPDATE3: 私は実際の問題に気づき始めています。特定のファイルを指すソースを手動で設定するようにテストしたところ、機能しました。生成された svg コンテンツを見ることによって... (その一部)

明らかに機能する例を試してみてください:(質問から取得: How to convert svg to png using html5 canvas/javascript/jquery and save on server )

http://jsfiddle.net/epistemex/xfh7nctk/23/

jsfiddle では、ソースは outerHTML によって取得されます。

そしてフィドルからのhtml..（開始）

ただし、html が同じように見えず、svg に ID がないため、私の場合は機能しません。SVG に ID を追加しようとしましたが、SVG にクラスを追加しようとしましたが、成功しませんでした。また、wrap() を使用してラッパーを作成しようとしました-jQuery の関数ですが、成功しませんでした:

プロジェクトに sketch.js を追加したところ、うまくいきました。問題が 1 つだけあります。「スケッチされた」画像をデータベースに保存する必要がありますが、それを取得しようとすると空白の画像が取得されます :-( どうすればそれができますか? このコードでは toDataURL は常に同じであり、空白の画像を表す

Facebook の Graph API (v2.5) User Photo Edge によると、Facebook に写真を公開する方法は 2 つあります。

1: 写真を multipart/form-data として添付します。オブジェクトの名前は問題ではありませんが、歴史的に人々は source を写真のパラメーター名として使用してきました。これがどのように機能するかは、投稿を行うためにたまたま使用している SDK によって異なります。

2: url パラメーターを使用して公開することにより、既にインターネット上にある写真を使用します。

キャンバスから base64 画像データを取得したので、最初の方法 (マルチパート)を使用する必要があります。

ドキュメントがあまり有益ではないため、これは混乱しているようです。image の urlData は、他のパラメーターと共にマルチパート データ内の何らかの形式でエンコードされることを理解しています。Javascript SDK とグラフ API v2.5 を使用してこれを行う方法について、実際に機能するサンプル コードや適切な説明が見つかりません。スタックオーバーフローで徹底的に検索した後でも。これに関して、stackoverflowで部分的に回答された/回答されていないさまざまな質問を見てきました...しかし、それでも機能しません。

助けてください。ありがとう ！

同様の質問
Facebook Javascript フォーム データ 写真のアップロード: アップロード ファイル エラーが必要
Javascript: グラフ API を介してキャンバスから FB に画像を
アップロード Base64 画像をアップロード Facebook グラフ API - Javascript API がここにあるかどうか不明

[編集] - 既に試したコード。

応答 -「エラーが発生しました:(#324) イメージ ファイルが見つからないか無効です」