要件: HTML5 コンテンツを画像として保存する
アイデア: Canvas 描画を通じて Base64 イメージを生成し、長押ししてローカルに保存します
問題: Canvas はクロスドメインを禁止しており、Android WeChat を長押ししても Base64 画像を保存できず、サーバーによってプルされた画像は圧縮されています
2. 具体的な問題点質問 1: Canvas ではクロスドメインが禁止されています。画像が他のドメインからのものである場合、toDataURL() を呼び出すとエラーがスローされます。
解決策: <img> タグは、crossorigin 属性、つまり、crossOrigin=Anonymous またはcrossOrigin=* を導入することで、クロスドメインの問題を解決できます。モバイル Q 環境では、「Anonymous」の設定はサポートされていないため、設定する必要があることに注意してください。 Crossorigin=anonymous が使用されている場合は、匿名 CORS と同等です。
問題 2:crossOrigin が設定された <img> タグはクロスドメイン イメージをプルダウンできず、img.onload をトリガーできません。
解決策: バックグラウンド転送または nigix プロキシの場合、Access-Control-Allow-Origin: wx.qlogo.cn を設定して、静的リソース サーバー イメージがドメインを越えて取得できるようにします。この設定により、クロスドメイン イメージの取得の問題が解決されます。 (ここの画像はユーザー アバター ドメイン名 wx.qlogo.cn ですが、クロスドメインの問題があります)
質問 3: Android スマートフォンの WeChat h5 を長押ししても Base64 画像を保存できません
解決策: Canvasで描画したbase64画像をサーバーにアップロードし、サーバーからpng(jpg)画像を取得します。このアプローチはさらに面倒なので、後で改善する方法を見つける必要があります。
問題 4: サーバーにアップロードされた画像は大幅に圧縮されています
解決策: アップロードされた画像には、さまざまな圧縮レベルの複数のリソースがサーバー上にあります。より鮮明なピクセルの画像をディレクトリ「http://img10.360buyimg.com/promotepic/」から取得できます。
質問5: 描かれたQRコードのリンク(//wqs.jd.com/xxx)を長押ししても直接ページに入ることができません。
解決策: 描画する QR コード リンクを指定する場合は、http: を追加する必要があります。追加しないと、QR コードがテキストとして認識されます。
// コードのキャンバス描画部分: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; var img = new Image, Canvas = document.createElement(canvas), ctx = Canvas.getContext(2d), //バックグラウンド nigix エージェントについては質問 2 を参照 src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) ; / /キャンバスのクロスドメイン toDataURL を読み取れない問題を解決するには、質問 1 を参照してください。 img.crossOrigin = Anonymous //画像リソースのプリロード img.onload = function() { Canvas.width = img.width; Canvas.height = img.drawImage( img, 0, 0 ); // 描画された Base64 イメージ localStorage.setItem(savedImageData, Canvas.toDataURL(image/png) );ソース;写真をアップロードするためのコードの一部:
// 写真のアップロードについては質問 3 を参照 $.ajax({ type: 'POST', url:loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename : new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg'、コンテンツ:base64pic、 active:shotpic20160901 }, dataType: 'json', xhrFields: { withCredentials: true }, success: function(data) { if (picdata.id == 1 && picdata.msg) { //このプレフィックス パスのイメージ パスは明確にするために質問 4 を参照してください。 var imgPre = 'http://img10.360buyimg.com/promotepic/'; //画像アドレス結合のための完全なアドレスリンク var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //ビジネスロジックを実行するため}; ,写真); } }、エラー:関数(データ){ }});以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。