HTML5 ページの長押し画像保存機能の問題を 1 つの記事で完全に解決

この記事では、H5に長押しして写真を保存する機能を実装する方法を詳しく紹介します。

一部の H5 プロモーション ページでは、長押しして画像を保存することが非常に一般的な要件ですが、js にはそのような機能がないため、Android または iOS のネイティブ機能に依存するか、キャンバスを使用して自分で画像を描画する必要があります (スクリーンショット)。ネイティブのコストと比較するとコストが高すぎ、広く流通しているクロスプラットフォームの H5 に比べて時代遅れのアプリに依存する必要があるため、キャンバスが一般的な方法になりました。

保存される画像ノードは、img タグであることが望ましいです。スクリーンショットを撮りたいノードは、img タグが付いた画像であることが望ましいです。テスト後、背景画像の場合は少しぼやけてしまうため、次のようにする必要があります。それには特に注意してください。

 npm i html2canvas --saveimport html2canvas from 'html2canvas'; // 保存する画像ノード const dom = document.querySelector('img') // 新しいキャンバスを作成します const Canvas = document.createElement('canvas'); ; const width = document.body.offsetWidth; // 表示される画面の幅 const height = document.body.offsetHeight;表示される画面の高さ constscale = window.devicePixelRadio; // デバイスの devicePixelRadio // Canvas キャンバスをスケール倍に拡大し、ぼやけの問題を解決するために小さな画面に配置します。 ; Canvas.height = 高さ * スケール;Canvas.getContext('2d').scale(スケール, スケール);html2canvas(dom, { キャンバス: Canvas, スケール, useCORS: true, ロギング: true, width: width + 'px', hegiht: height + 'px',}).then((canvas) =​​> { const context = Canvas.getContext('2d'); // アンチエイリアスをオフにします context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; // キャンバスを画像に変換します Canvas2Image(canvas, Canvas.width, Canvas.height);});

通常の状況では、jpeg 形式への変換は非常に適切です。

 Canvas2Image(canvas、canvas.width、canvas.height) {const retCanvas = document.createElement('canvas'); const retCanvas.getContext('2d'); .drawImage(キャンバス, 0, 0, 幅, 高さ, 0, 0, 幅, height); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // 必要に応じて形式を変更できます。

まず長押しメソッドを実装します。長押しすると、生成された画像が本文に追加され、画面上に透明に浮かび上がります。

 // 長押しメソッドをカプセル化 longPress(fn) { let timeout = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800) // 長押し時間が 800ms を超えた場合、渡されたメソッドが実行されます}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // 長押し時間が 800 ミリ秒未満の場合、受信メソッドは実行されません}, false);生成された画像を bodyconst img = Canvas2Image(canvas, Canvas.width, Canvas.height);document.body.appendChild(img);img.style.cssText = に追加します。幅:100%;高さ:100%;位置:絶対;上:0;左:0;右:0;下:0;不透明度:0;;

4. 完全なコードは次のとおりです。

 $.fn.longPress = function(fn) { let timeout = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart' , () => { timeout = setTimeout(fn, 800) // 長押し時間が 800ms を超えた場合、渡されたメソッドが実行されます}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // 長押し時間が 800ms 未満の場合、受信メソッドは実行されません}, false); $ ('img ').longPress(() => { saveImg();});saveImg() { // 保存する画像ノード const dom = document.querySelector('img');新しいキャンバスを作成します const Canvas = document.createElement('canvas'); const width = document.body.offsetWidth; // 表示される画面の幅 const height = document.body.offsetHeight; constscale = window.devicePixelRatio; // デバイスの devicePixelRatio // Canvas キャンバスをスケール倍に拡大し、ぼやけの問題を解決するために小さな画面に配置します Canvas.width = width *スケール; Canvas.height = 高さ * スケール; Canvas.getContext('2d').scale(スケール, スケール); html2canvas(dom, { キャンバス: キャンバス, スケール, useCORS: true, ログ: true, width: width + ' px', hegiht: height + 'px', }).then((canvas) =​​> { const context = Canvas.getContext('2d'); //アンチエイリアスをオフにする context.mozImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; // Canvas は画像に変換されます const img = Canvas2Image(canvas, Canvas.width, Canvas.高さ); document.body.appendChild(img); img.style.cssText = width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0; }}canvas2Image(キャンバス, 幅, 高さ) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.width = 幅; retCanvas.height = 高さ; retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height); = retCanvas.toDataURL('image/jpeg'); // 必要に応じて形式を変更できます return img;}

最初にやり始めたときは、インターネットでたくさんの記事を読んで試行錯誤を繰り返しましたが、完成してから、長押しして画像を保存する機能に気づきました。この記事ではプロセス全体を完全に紹介します。

以上は、HTML5 ページの長押し画像保存機能を完全に解決するために編集者が紹介した記事です。ご質問があれば、メッセージを残してください。編集者が返信します。間に合うように！