Vueでウォーターマークを削除する方法

Vue を使用した開発プロセスでは、サードパーティのコンポーネント ライブラリを使用することが多く、著作権を確保するために、これらのコンポーネント ライブラリはページにウォーターマークを追加することがよくあります。ただし、これらの透かしはプロジェクトによってはユーザー エクスペリエンスに影響を与える可能性があるため、これらの透かしを削除する方法を見つける必要があります。この記事では、Vue でウォーターマークを削除する 2 つの方法を紹介します。

方法 1: コンポーネントのソース コードを変更する

Vue でウォーターマークを削除する最初の方法は、コンポーネントのソース コードを変更することです。この方法は最も完全ですが、特定のプログラミングが必要です。財団。

まず、ウォーターマークを追加するコードを見つける必要があります。通常の状況では、ウォーターマーク コードはコンポーネントの JS ファイルに追加されます。

export default {
  name: 'Watermark',
  mounted() {
    const option = this.$options.watermarkOption
    let id = `wm_${new Date().getTime()}`
    let parentNode = option.parent || document.body
    let canvasEle = document.createElement('canvas')
    parentNode.appendChild(canvasEle)
    canvasEle.id = id
    canvasEle.width = option.defaultWidth
    canvasEle.height = option.defaultHeight
    let canvas = document.getElementById(id)
    let ctx = canvas.getContext('2d')
    ctx.font = '16px Microsoft JhengHei'
    ctx.fillStyle = 'rgba(200, 200, 200, 0.40)'
    ctx.rotate((Math.PI / 180) * option.angle)
    ctx.fillText(option.content, option.left, option.top)
  }
}

このコードの機能は、キャンバス要素を追加し、コンポーネントのマウント時にウォーターマークを描画することであることがわかります。このコードをコメントアウトするか、ウォーターマークを追加するコードの部分を削除するだけです。

私のように Vue Cli を使用してプロジェクトをビルドする場合は、コンポーネントのソース コードをプロジェクトの src ディレクトリにコピーしてから変更することをお勧めします。変更が完了したら、コンポーネントを再コンパイルする必要があり、変更されたコンポーネントをプロジェクトに導入できます。

プロジェクトで Webpack や Rollup などの自動ビルド ツールを使用する場合、パッケージ化プロセス中に変更が上書きされる可能性があるため、変更が有効になっているかどうかを定期的に確認する必要があることに注意してください。

方法 2: CSS スタイル オーバーライドを使用する

2 番目の方法は、CSS スタイル オーバーライドを使用することです。この方法はより簡単ですが、透かしの位置が複雑すぎるなど、場合によっては特定の制限がある場合があります。

まずウォーターマークが配置されている親要素を見つけて、それを CSS スタイルで上書きします。通常、ウォーターマークが配置される親要素が親コンテナです。

ページ全体に追加されたウォーターマークを削除したい場合は、次の CSS スタイルを追加できます:

body ::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  pointer-events: none;
  background-image: url(data:png;base64,iVBORw0KGg...);
}

このうち、background-image はウォーターマーク画像の Base64 エンコードです。このようにCSSスタイルを追加することで、ページ全体のウォーターマークを消すことができます。

特定のコンポーネントのウォーターマークを削除したい場合は、コンポーネントの DOM 構造に従って調整し、適切な CSS スタイルを追加する必要があります。たとえば、コンポーネントのウォーターマークがコンテナ要素内にある場合、次の CSS スタイルを追加できます。

.container ::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
  pointer-events: none;
  background-image: url(data:png;base64,iVBORw0KGg...);
}

ここで、.container はコンポーネント内のコンテナ要素のクラス名です。

結論

上記は、Vue でウォーターマークを削除する 2 つの方法です。プログラミングに慣れていない場合は、2 番目の方法を使用する方が便利かもしれませんが、この方法には一定の制限があります。ウォーターマークをより完全に削除したい場合は、最初の方法を使用できます。どちらの方法を選択する場合でも、コンポーネントやプロジェクトの安定性に影響を与えないように注意して進める必要があります。

以上がVueでウォーターマークを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。