Back in 2019, I built a 360 image gallery with Bootstrap, A-Frame, Django
Recently, we asked a group of computer science interns to build a 360 Image API server.
In addition to scaling the images to different sizes, the backend server also adds watermarks using django-thumbnails.
Watermark at bottom of equirectangular image
The watermark is fairly subtle. This is an image from a THETA X that was cut down from 11K to 4K. The watermark is overlaid as a straight line.
In most views, the watermark does not interfere with the building and details.
However, if you view the image at the bottom, the watermark is visible.
larger single watermark
This type of watermark will obscure some of the details of the image.
Setup Django with Watermark Image
To apply the watermark to a 4K image, I create a watermark PNG file that is 4K by 2K.
The watermark has a transparent background and is called oppkey_4000.png.
It is located in photo_app/static/.
settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
"thumbnails",
'photo_app',
]
WATERMARK_4000_PATH = os.path.join(BASE_DIR, 'static/', 'oppkey_4000.png')
THUMBNAILS = {
'METADATA': {
'BACKEND': 'thumbnails.backends.metadata.DatabaseBackend',
},
'STORAGE': {
# 'BACKEND': 'django.core.files.storage.FileSystemStorage',
'BACKEND': 'storages.backends.s3.S3Storage',
# You can also use Amazon S3 or any other Django storage backends
},
'SIZES': {
'small': {
'PROCESSORS': [
{'PATH': 'thumbnails.processors.resize', 'width': 400, 'height': 200},
],
},
'watermark_4000': {
'PROCESSORS': [
{'PATH': 'thumbnails.processors.resize', 'width': 4000, 'height': 2000},
# Only supports PNG. File must be of the same size with thumbnail (4000 x 2000 in this case)
{'PATH': 'thumbnails.processors.add_watermark', 'watermark_path': WATERMARK_4000_PATH}
],
},
}
}
template file
In the Django template file, the watermarked image can be accessed at
photo.image.thumbnails.watermark_4000.url
Using pannellum, the code snippet is below.
<script data-url="{{ photo.image.thumbnails.watermark_4000.url}}">
const data = document.currentScript.dataset;
const url = data.url;
console.log(url);
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": url,
"autoLoad": true
});
</script>
A demo of the watermark is here:
