So implementieren Sie mit PHP und UniApp die Wasserzeichenfunktion von Bildern

So implementieren Sie mit PHP und UniApp die Wasserzeichenfunktion von Bildern

Einführung:
Im heutigen Zeitalter der sozialen Medien sind Bilder zu einer der am häufigsten verwendeten Kommunikationsmethoden für Menschen geworden. Um ihre Bildwerke besser zu schützen, fügen viele Menschen ihren Bildern häufig Wasserzeichen hinzu. In diesem Artikel erfahren Sie, wie Sie mit PHP und UniApp die Wasserzeichenfunktion von Bildern implementieren, um Ihre Bilder personalisierter und sicherer zu machen.

1. PHP implementiert die Bildwasserzeichenfunktion

1. Erstellen Sie eine PHP-Datei und nennen Sie sie „watermark.php“.

7dee2731313a63034f0d7432f73b44b3

2. Nennen Sie das Bild, das mit einem Wasserzeichen versehen werden soll, „source.jpg“ und platzieren Sie es im selben Verzeichnis wie die Datei „watermark.php“.
3. Besuchen Sie watermark.php in Ihrem Browser, um das mit Wasserzeichen versehene Bild anzuzeigen.

2. UniApp implementiert die Bildwasserzeichenfunktion

1. Erstellen Sie eine neue Seite im Seitenverzeichnis von UniApp und nennen Sie sie Wasserzeichen.
2. Fügen Sie in der Vue-Datei der Wasserzeichenseite den folgenden Inhalt hinzu:

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

<image src="../../static/source.jpg" mode="aspectFit" @tap="addWatermark" />

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export Standard {
Methoden: {

addWatermark() {
  uni.getImageInfo({
    src: '../../static/source.jpg',
    success: (res) => {
      uni.previewImage({
        urls: ['../../static/source.jpg'],
        success: () => {
          uni.showLoading({
            title: '正在添加水印...',
            mask: true
          });
          
          const ctx = uni.createCanvasContext('watermarkCanvas');
          ctx.drawImage(res.path, 0, 0, res.width, res.height);
          ctx.setFontSize(40);
          ctx.setFillStyle('rgba(255, 255, 255, 0.5)');
          ctx.setTextAlign('center');
          ctx.setTextBaseline('middle');
          ctx.fillText('Watermark', res.width * 0.5, res.height * 0.5);
          ctx.draw(false, () => {
            uni.canvasToTempFilePath({
              canvasId: 'watermarkCanvas',
              success: (result) => {
                uni.hideLoading();
                uni.saveImageToPhotosAlbum({
                  filePath: result.tempFilePath,
                  success: () => {
                    uni.showToast({
                      title: '水印已添加',
                      icon: 'success'
                    });
                  },
                  fail: () => {
                    uni.showToast({
                      title: '保存失败',
                      icon: 'none'
                    });
                  }
                });
              },
              fail: () => {
                uni.hideLoading();
                uni.showToast({
                  title: '添加水印失败',
                  icon: 'none'
                });
              }
            });
          });
        }
      });
    },
    fail: () => {
      uni.showToast({
        title: '获取图片信息失败',
        icon: 'none'
      });
    }
  });
}

}
};
2cacc6d41bbb37262a98f745aa00fbf0

3. Nennen Sie das Bild, das mit einem Wasserzeichen versehen werden soll, „source.jpg“ und platzieren Sie es im statischen Verzeichnis.
4. Fügen Sie „pages/Watermark/index“ im Feld „pages“ in der Datei manifest.json hinzu.
5. Greifen Sie im Browser auf das UniApp-Projekt zu, klicken Sie auf das Bild, um eine Vorschau anzuzeigen, und drücken Sie lange auf das Bild, um ein Wasserzeichen hinzuzufügen. Das Wasserzeichen wird automatisch in der Mitte des Bildes hinzugefügt und im Fotoalbum des Telefons gespeichert.

Fazit:
Durch die Verwendung von PHP und UniApp können wir die Wasserzeichenfunktion von Bildern einfach implementieren. PHP kann Bilder auf der Serverseite verarbeiten, während UniApp auf der mobilen Seite Wasserzeichen hinzufügen kann. Auf diese Weise können wir nicht nur die Wasserzeichenverarbeitung über PHP auf dem Computer durchführen, sondern auch Wasserzeichenvorgänge auf dem Mobiltelefon über UniApp durchführen, was bequem und praktisch ist. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit PHP und UniApp die Wasserzeichenfunktion von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!