キャンバスを使用してモバイル プロジェクトを共有し、ポスター画像を合成します。

最近、キャンバスを使用してポスター画像を合成するモバイルプロジェクトを作成しました。キャンバスの基盤がないため、先輩からのデモを探しました。しかし、開発中に多くの問題に遭遇しました。発生した問題と解決策を以下にまとめます:

1. モバイル キャンバス プロジェクトを全画面に適応させる際の問題

問題の説明: キャンバスの幅と高さは設定することしかできないため、 px 値であり、rem 単位をサポートしていないため、モバイルデバイスで使用したいのですが、画面の解像度が複雑な場合、全画面をカバーするキャンバスの効果を実現するのは困難です。

解決策: js を介して携帯電話画面の clientWidth 値を取得し、それを Canvas に割り当てて、全画面に適応する効果を実現します。

2 Canvas によって合成された画像がぼやけて表示されます。

問題の説明: 特に識別する必要がある画像上に QR コードがあり、ユーザーがそれをまったく識別できない場合、キャンバスによって生成された画像にぼやけの問題があります。 解決策: 1) あなたは、この問題を解決するには、hidpi-canvas.js プラグインを参照してください

2) キャンバスのスタイルで幅と高さの値を希望のサイズに設定し、幅を拡大することもできます。キャンバスの高さの値をそれぞれ x 倍にします。ここで、キャンバスに絵やテキストを描画するときは、対応する値も x 倍に拡大する必要があることに注意してください。

3. 画像を合成するときに、一部のモデルの画像がめちゃくちゃになります

問題の説明: キャンバスの Base64 画像をエクスポートする場合、一部の Android スマートフォンでは、必要な効果画像の半分しか表示できません。デバイスのピクセル比がバグの原因になっているということです。 解決策: デバイスのピクセル比を取得し、モデルを決定します。ここでは、写真を合成するときに、幅と高さの値を元のサイズに戻します。 。

var clientWidth = document.documentElement.clientWidth;
var canvasWidth = Math.floor(clientWidth);
var canvasHeight = Math.floor(clientWidth*(1334/750));
$("#main").css('width',canvasWidth+'px');
$("#main").css('height',canvasHeight+'px');

4. iPhone に写真をアップロードするときに回転の問題があります

問題の説明: テスト中に、iPhone にアップロードされた写真が回転していることが判明しましたが、この問題は回転していました。インターネットから保存した写真をアップロードする場合は発生しません。Android は正常です。 解決策: この問題は、exif.js プラグインを使用して解決できます。このプラグインは、写真が撮影されたときの角度やその他の情報、主に Orientation 属性を取得し、対応する操作を実行します。ドメイン画像があり、base64 画像をエクスポートできません

問題の説明: キャンバス内にクロスドメインからリクエストされた画像がある場合、base64 画像のエクスポートは、キャンバス自体のセキュリティ メカニズムが原因で失敗するはずです。

解決策: このバグは、フロントエンドとバックエンドの連携によって解決する必要があります。まず、バックエンドでイメージを設定してクロスドメインを許可し、次に Img.crossOrigin = "Anonymous" を設定します。フロントエンド。

//hidpi-canvas将canvas的width和height属性放大pr倍
if (navigator.userAgent.match(/iphone/i)) {
    canvas.width = width ;//恢复为原先的大小
    canvas.height = height ;
}else{
    canvas.width = width / pr;//恢复为原先的大小
    canvas.height = height / pr;
}

6. キャンバスが絵を描くときに白い画面が表示されます 問題の説明: キャンバスが絵を描くときに白い画面が表示されることがあります。画像を読み取る前に実行されます。

解決策: img に onload 関数を追加し、画像を読み込んだ後に描画操作を実行します。

var file = $(this)[0].files[0];
EXIF.getData(file, function() {  
    EXIF.getAllTags(this);     
    Orientation = EXIF.getTag(this, 'Orientation');  
});

7. WeChat の閲覧中に画像を長押ししても保存できない 問題の説明: WeChat ブラウザーで長押しすると、キャンバスを通じて生成された画像が保存できない、または QR コードが認識される、いくつかの Android 写真 これが起こった場合、iPhone は画質が高すぎることが正常です。

解決策: Base64 画像をエクスポートするときに画質を圧縮します。

var pageqrcodeimg = qrcodecanvas.toDataURL('image/jpg');
var qrcodeImg = new Image();
qrcodeImg.crossOrigin = "Anonymous"; 
qrcodeImg.src = pageqrcodeimg;
qrcodeImg.onload=function(){
        //绘制图片
}

追記: これらは基本的にこれまでに発生した問題です。今後問題が発生した場合は、引き続き更新していきます。

以上がキャンバスを使用してモバイル プロジェクトを共有し、ポスター画像を合成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。