序文:私は最近、Canvasのポスターの写真を備えたモバイルアイテムを作成しましたメソッドは次のように要約しています。
1。モバイルエンドキャンバスプロジェクトの適応フル画面の問題問題の説明:Canvasの幅と高さはPX値のみを設定し、REMユニットをサポートできないため、モバイルデバイスの画面解像度が複雑な場合、Canvasが完全な画面で覆われた効果に到達することは困難です。解決策:JSを介して携帯電話画面のクライアント幅値を取得し、キャンバスに渡して、フル画面を適応させる効果を実現します。
var clientWidth = document.clientWidth = math.floor(clientWidth); px '); $(#main).css(' height '、canvasheight+' px ');2。キャンバス合成の写真がぼやけた現象に見えます
問題の説明:キャンバスによって生成された写真にはあいまいな問題があります。特に、写真にQRコードがある場合、認識する必要がある場合、ユーザーはそれを認識できません。
解決策:1)hidpi-canvas.jsプラグインを引用して、この問題を解決できます。
2)キャンバスのスタイルに幅と高さの値を設定して、必要なサイズを設定し、それぞれ対応する値の幅と高さを拡大することもできます。
3.合成写真が合成される場合、一部のモデル写真は混oticとしています問題の説明:一部のAndroid電話は、キャンバスのBase64画像をエクスポートする場合、効果の効果の写真の半分しか表示できません。
解決策:Pixel PRを取得します。ここでは、合成写真が合成されている場合にのみ、幅と高さの値が復元されます。オリジナルサイズ。
// hidpi-canvasは、キャンバスの幅と高さの属性を拡大します。4. iPhone携帯電話のアップロード画像には回転問題があります
問題の説明:テスト中に、iPhoneの携帯電話が回転の写真をアップロードし、インターネットからアップロードされた画像が発生せず、Androidが正常であることがわかりました。
解決策:この問題は、exif.jsプラグインを使用して解決できます。
var file = $(this)[0] .files [0]; );;5。キャンバスはクロスドメインの写真を描き、base64写真をエクスポートできません
問題の説明:CANVASにクロスドメイン要求の写真がある場合、出力Base64画像は、キャンバス自体のセキュリティメカニズムによって引き起こされる必要があります。
解決策:このバグは、背面と背面で解決する必要があります。
var pageqrcodeimg = qrcodecanvas.todaurl( 'image/jpg');6。キャンバスの写真を描くときに白い画面が表示されます
問題の説明:キャンバスが絵を描く前に、白い画面の状況が時々現れることがあります。
解決策:オンロード関数をIMGに追加し、画像を読んだ後に描画操作を実行します。
qrcodeimg.onload = function(){//画像を描く}7、wechatブラウザ、長いプレス写真を保存できません
問題の説明:Canvasによって生成された写真は、AndroidのQRコードを保存または認識することはできません。
解決策:Base64画像をエクスポートするときに、画像の品質を圧縮します。
var mycanvas = document.getElementById(Main);
PostScript:現在の問題は、基本的にこれらの問題が発生した場合、引き続き更新されます。
上記は、この記事のすべての内容です。