html 5ローカル画像をアップロードして様々な問題を処理する
3345 ワード
これは最近会社にプロジェクトを書いて、プロジェクトの要求は大体このようにします:1.携帯電話のローカル画像をアップロードし、裁断(後加の需要)2.画像を回転することができ、裁断(後述の需要)3に用いる.各种の文字を记入して、色を选んで、それから文字と2つの関连するピクチャーを、透かして切り取ったピクチャーの上で、アップロードサーバーは1つのピクチャーのアドレスを生成して、帰って、分かち合います.
機能は大体上のようなもので、その他は各種の小さな機能で、言うまでもなく、技術の選択型で言えば、全体的にVue(router、resource、webpackなどを含む)を使用します.
では、これらのニーズはどうすればいいのでしょうか.2、この機能はcanvasの回転画像を使って解決するもので、回転するときは横縦比を保ち、幅の高い大きさ(ピット4)に注意しなければならないことに注意しなければならない.3、canvasを使って透かしと画像を重ね合わせればいいです.主に座標に注意します.
では、ピット:1、srcを手に入れたbase 64コードは、問題がないように見えますが、実際には大きな問題があります.多くの画像は携帯電話に縦画面として表示されていますが、手に入れたbase 64コードは、imgのsrcに直接割り当てられた後、横画面であることがわかりました.最初にこのような状況を発見して、個別の現象だと思って、最後に絶えず試してみると、非常に普遍的な状況であることがわかりました.特にiPhoneの携帯電話は、あなたが選んだ画像フォルダ、アルバムと写真の流れが同じ画像、横画面、縦画面に分かれています.なぜか全く理解できなかった???基本的に午後はこの問題に費やされた.
夜まで帰ってきて、友人のIOS開発の大神さんに聞いたら、@葉孤城_、彼は私に教えて、今iPhoneのカメラが横になっているため、携帯電話の中で縦画面を表示する原因はiosが自分で処理したので、彼らは画像の撮影角度の数値によって横縦問題を判断することができますが、この数値は私たちのweb端では確かに手に入らなくて、とても気まずいです.では、この問題をどう解決すればいいのでしょうか.私が使っている案:画像を回転させ、ユーザー自身が自発的に画像を回転させ、角度を選択することができます.もう一つの解決策は、ピット2にも使用され、後述する.
2、この横画面以外にも、androidの携帯電話にアップロードされているものがあり、画像を選択した後、何の反応もなく、html 5のFile Apiがサポートされていないため、アップロードされた画像が表示されず、後ろには各種のdebuggerがあり、Inputラベルをトリガーしていないchange事件が原因で、しかもどうしてもトリガーできないことに気づいた.この問題を解決するために、様々な公式ドキュメントとstackoverflowを調べたところ、type=「file」のinputに携帯電話のアップロード画像を表す2つの属性を追加できることが分かった.
このようにacceptとcaptureを追加した後、問題のあるandroid携帯電話は、画像を選択する時、いくつかのフォルダがあって、選択することができて、その中にはアップロードすることができて、あるのはだめで、いつも注意深くテストして発見して、sdカードの上の画像は手に入らないで、change事件をトリガーすることができなくて、rootの権限がなくてファイルのデータを取りに行くためです.また1つの无解な问题で、あなたのwebはブラウザの中で、権限は低くて、(webの権限の问题にツッコミを入れなければならなくて、お母さん)どのように问题を解决しますか??迂回して、つまりもしあなたのページがあなたの会社の自分のAppの中にネストされているならば、Appにあなたを助けさせて、それでは私达のプロジェクトは微信の伝播で、きっと微信のブラウザの中で、だから微信のJSDKの選択のピクチャーのインターフェースを呼び出すことができて、彼はこの権限を越えることができて、その上1つの利益があって、穴1の問題を解決して、彼は横屏の問題を処理することができます縦画面を見て、実際の横画面のアップロードを縦画面に処理することですが、代価も小さくありません.画像を選択してkeyを手に入れて、sdkを呼び出して微信のサーバーに転送し続け、serveridを手に入れて、このidを自分のサービス側に伝えて、彼らにこのidを通じて、微信に行って画像を自分のサーバーにダウンロードして、あなたにUrlを返します.プロセスは曲がりくねっており、ダウンロード回数に制限がある(微信とロード制限を申請することができる).
参考:微信js sdk選択ピクチャインタフェース
3、私达は引き続き穴を言って、以上の问题を解决して、それから裁断して、私の使用する方案はこのようにして、base 64を取得した后に、1つのimgに値を与えて、それからこのimgの上で枠选の移动を行って、座標を计算してそれから裁断して、pc端はまったく问题がなくて、効率はとても高くて、しかし微信の上でテストして、3つの問題(お母さん、携帯電話の端は穴で、1つの機能、3つの異なる問題)を発見して、第1の問題、みんなは今携帯電話の画素が高くて、ピクチャーが小さくないことを知っていて、アップロードしてからbase 64も小さくなくて、imgのsrcの中に置いて実はメモリの中で、全体の微信が特に崩壊しやすい(崩壊して、彼は崩壊して、微信は崩壊しました---3回)を招いて、2つ目の問題は、vueのonを使用してtouchイベントをバインドし、応答が遅く、移動が少しもスムーズではなく、クラッシュします.間違いなく、またクラッシュしました.3つ目の問題は、canvas変換を使用して回転するには、まず画像データを削除し、回転が完了した後、画像srcに値を割り当てるのは面倒です.
ソリューション:canvasを統一的に使用し、imgを使用しないで、裁断が完了したことを知って、imgのbase 64を手に入れればいいです.そして、エクスポートするときは、jpegを使用してpngではなく、画質を下げて、私は完全に影響がないと思います.つまり、画像の裁断、回転はcanvasで、イベントは直接オリジナルバインドすることをお勧めします.
4、回転する穴、この问题は私达が原始のピクチャーのデータを保存しなければならなくて、canvasを行って先に回転してdrawImageを行って、もし回転していないならば、canvasの自分のimageData、回転することができないようで、私はマトリックスの方式を试みてすべてだめなようです(自分の数学がよくないかもしれません!!!もし人が知っているならば、demo).
以上が今回のプロジェクトで、出会った様々な大きな穴、その他は小さな場所ですが、全体的には、任務を完成し、新しい技術Vueを使用しました.js.Vueのcomponentはとても使いやすいので、親子関係に注意してpropsの継承は大丈夫です.
Vueに興味があれば、QQ群:364912432240319632を加えることができます.
賞を求めて、微博に関心を持つことを求めます.O(∩∩)Oハハ~
最後にアクティブなウェブサイトを添付し、微信クライアントが開いてから使用できます:予測2046
皆さん、遊びに参加してください.
機能は大体上のようなもので、その他は各種の小さな機能で、言うまでもなく、技術の選択型で言えば、全体的にVue(router、resource、webpackなどを含む)を使用します.
では、これらのニーズはどうすればいいのでしょうか.2、この機能はcanvasの回転画像を使って解決するもので、回転するときは横縦比を保ち、幅の高い大きさ(ピット4)に注意しなければならないことに注意しなければならない.3、canvasを使って透かしと画像を重ね合わせればいいです.主に座標に注意します.
では、ピット:1、srcを手に入れたbase 64コードは、問題がないように見えますが、実際には大きな問題があります.多くの画像は携帯電話に縦画面として表示されていますが、手に入れたbase 64コードは、imgのsrcに直接割り当てられた後、横画面であることがわかりました.最初にこのような状況を発見して、個別の現象だと思って、最後に絶えず試してみると、非常に普遍的な状況であることがわかりました.特にiPhoneの携帯電話は、あなたが選んだ画像フォルダ、アルバムと写真の流れが同じ画像、横画面、縦画面に分かれています.なぜか全く理解できなかった???基本的に午後はこの問題に費やされた.
夜まで帰ってきて、友人のIOS開発の大神さんに聞いたら、@葉孤城_、彼は私に教えて、今iPhoneのカメラが横になっているため、携帯電話の中で縦画面を表示する原因はiosが自分で処理したので、彼らは画像の撮影角度の数値によって横縦問題を判断することができますが、この数値は私たちのweb端では確かに手に入らなくて、とても気まずいです.では、この問題をどう解決すればいいのでしょうか.私が使っている案:画像を回転させ、ユーザー自身が自発的に画像を回転させ、角度を選択することができます.もう一つの解決策は、ピット2にも使用され、後述する.
2、この横画面以外にも、androidの携帯電話にアップロードされているものがあり、画像を選択した後、何の反応もなく、html 5のFile Apiがサポートされていないため、アップロードされた画像が表示されず、後ろには各種のdebuggerがあり、Inputラベルをトリガーしていないchange事件が原因で、しかもどうしてもトリガーできないことに気づいた.この問題を解決するために、様々な公式ドキュメントとstackoverflowを調べたところ、type=「file」のinputに携帯電話のアップロード画像を表す2つの属性を追加できることが分かった.
このようにacceptとcaptureを追加した後、問題のあるandroid携帯電話は、画像を選択する時、いくつかのフォルダがあって、選択することができて、その中にはアップロードすることができて、あるのはだめで、いつも注意深くテストして発見して、sdカードの上の画像は手に入らないで、change事件をトリガーすることができなくて、rootの権限がなくてファイルのデータを取りに行くためです.また1つの无解な问题で、あなたのwebはブラウザの中で、権限は低くて、(webの権限の问题にツッコミを入れなければならなくて、お母さん)どのように问题を解决しますか??迂回して、つまりもしあなたのページがあなたの会社の自分のAppの中にネストされているならば、Appにあなたを助けさせて、それでは私达のプロジェクトは微信の伝播で、きっと微信のブラウザの中で、だから微信のJSDKの選択のピクチャーのインターフェースを呼び出すことができて、彼はこの権限を越えることができて、その上1つの利益があって、穴1の問題を解決して、彼は横屏の問題を処理することができます縦画面を見て、実際の横画面のアップロードを縦画面に処理することですが、代価も小さくありません.画像を選択してkeyを手に入れて、sdkを呼び出して微信のサーバーに転送し続け、serveridを手に入れて、このidを自分のサービス側に伝えて、彼らにこのidを通じて、微信に行って画像を自分のサーバーにダウンロードして、あなたにUrlを返します.プロセスは曲がりくねっており、ダウンロード回数に制限がある(微信とロード制限を申請することができる).
参考:微信js sdk選択ピクチャインタフェース
3、私达は引き続き穴を言って、以上の问题を解决して、それから裁断して、私の使用する方案はこのようにして、base 64を取得した后に、1つのimgに値を与えて、それからこのimgの上で枠选の移动を行って、座標を计算してそれから裁断して、pc端はまったく问题がなくて、効率はとても高くて、しかし微信の上でテストして、3つの問題(お母さん、携帯電話の端は穴で、1つの機能、3つの異なる問題)を発見して、第1の問題、みんなは今携帯電話の画素が高くて、ピクチャーが小さくないことを知っていて、アップロードしてからbase 64も小さくなくて、imgのsrcの中に置いて実はメモリの中で、全体の微信が特に崩壊しやすい(崩壊して、彼は崩壊して、微信は崩壊しました---3回)を招いて、2つ目の問題は、vueのonを使用してtouchイベントをバインドし、応答が遅く、移動が少しもスムーズではなく、クラッシュします.間違いなく、またクラッシュしました.3つ目の問題は、canvas変換を使用して回転するには、まず画像データを削除し、回転が完了した後、画像srcに値を割り当てるのは面倒です.
ソリューション:canvasを統一的に使用し、imgを使用しないで、裁断が完了したことを知って、imgのbase 64を手に入れればいいです.そして、エクスポートするときは、jpegを使用してpngではなく、画質を下げて、私は完全に影響がないと思います.つまり、画像の裁断、回転はcanvasで、イベントは直接オリジナルバインドすることをお勧めします.
4、回転する穴、この问题は私达が原始のピクチャーのデータを保存しなければならなくて、canvasを行って先に回転してdrawImageを行って、もし回転していないならば、canvasの自分のimageData、回転することができないようで、私はマトリックスの方式を试みてすべてだめなようです(自分の数学がよくないかもしれません!!!もし人が知っているならば、demo).
以上が今回のプロジェクトで、出会った様々な大きな穴、その他は小さな場所ですが、全体的には、任務を完成し、新しい技術Vueを使用しました.js.Vueのcomponentはとても使いやすいので、親子関係に注意してpropsの継承は大丈夫です.
Vueに興味があれば、QQ群:364912432240319632を加えることができます.
賞を求めて、微博に関心を持つことを求めます.O(∩∩)Oハハ~
最後にアクティブなウェブサイトを添付し、微信クライアントが開いてから使用できます:予測2046
皆さん、遊びに参加してください.