چگونه بر روی تصاویر وب Watermark بگذاریم؟ یک روش ساده برای ایجاد واترمارک روی تصویر در صفحات وب که تنها با استفاده از html و css قابل انجام هست اینه که از دو تگ تودرتو استفاده کنید. تگ اول یک تگ div باشه که خاصیت background-image اون برابر با آدرس تصویر اصلی بدون هیچ transparency یا opacity باشه(به div حتما باید ابعاد تصویر مورد نظر داده بشه وگرنه صرف داشتن بکگراند تگ div ابعاد نمیگیره و تهی فرض میشه). تگ دوم تگ img که درون تگ div قرار می گیره و خاصیت src اون دربرگیرنده آدرس تصویر واترمارک هست که این تگ باید دارای خاصیت opacity باشه مثلا با مقدار 0.5 تا تصویر بکگراند div والد از زیر اون دیده بشه. و هم اینکه از طریق css این تگ img می تونید position دقیق واترمارکتون رو مشخص کنید. مثال :
<div style=” background-image:url(images/pic.jpg); width:500px; height:auto;”> <img src=”watermark.png” alt=”watermark” style=”opacity:0.5;” /> </div>
نمونه تصویر :
- با این روش یک واترمارک شفاف در وسط تصویر اصلی می تونید ایجاد کنید.
- در این روش مشکل دسترسی مستقیم به url بکگراند div وجود داره تا تصویر بدون واترمارک توسط کاربر مشاهده و دستیابی بشه که می تونید به روش redirect به تصویر پیش فرض از طریق فایل htaccess کاربر رو از دسترسی مستقیم به تصویر بکگراند منع کنید.
- در این روش چنانچه کاربر روی تصویر کلیک راست کنه و گزینه view image رو انتخاب کنه فقط تصویر واترمارک رو مشاهده می کنه و امکان مشاهده تصویر اصلی وجود نداره مگر از طریق همون url بکگراند div که همونطور که گفته شد باید برای بی اثر نشدن watermark اون رو از دسترسی مستقیم توسط htaccess حفظ کنید.
واتر مارک برای این هست که تصاویر سایت شما توسط افراد مختلف دزدیده نشن! این روش که شما گفتید طرف میتونه عکس رو کپی کنه بزار رو سایت خودش و واتر مارک هم روی اون درج نمیشه!!!! به نظر بنده باید سمت سرور این کار انجام بشه
ممنون جناب احمدی .
زبان php هم تابع imagecopy داره که کار واترمارک رو در سمت سرور انجام میده ولی خوب روش این نکته ، واترمارک رو فقط با html و css ایجاد میکنه و نباید با قدرت عملکرد توابع سمت سرور سنجید. مزایای خودشو داره :)
تصویری که تو وب سایت ارسال میشه زمان پردازش داخل سرور واترمارک بهشون اضافه میشه. یعنی عکس جدیدی با واترمارک ایجاد میشه و بعد ذخیره میشه.
ممنون نه من مشکلی ندارم فقط خواستم نظر تخصصی شما رو بدونم (:
دوست عزیز ITPRO یی
داخل داخل ITPRO هر کاری انجام میشه در زمان ذخیره سازی عکس روی خود عکس انجام میشه .(البته تا جایی که من احتمال میدم)
در صورت تمایل می تونید از تیم برنامه نویسی ITPRO سوال کنید.
جناب parsasi گفتم که حق باشماست. راستی به نظر شما سایت ITPRO روی تصاویرش واترمارک داره؟ این نکته و این سوال رو ، سوال یکی از دوستان توی انجمن طراحی وب به ذهنم انداخت. من فکر می کنم کاری که itpro هم انجام میده واترمارک واقعی نیست البته مشکل فوق رو نداره اما به نظر میرسه واترمارک باید دارای transparency باشه و روی قسمت اصلی متن یا تصویر بیفته تا اون رو حفاظت کنه. نظر شما چیه؟
حرف شما کاملا درسته
ولی ITPRO یی عزیز بهترین راه و با کیفیت ترین راه برای برداشتن عکس Save کردن اون هست که در این عمل واترمارک شما تاثیری ندارد.
بله درسته ولی حداقلش اینه که می تونید تصویری رو در سایت نمایش بدید بدون اینکه دغدغه دزدیده شدن عکس رو داشته باشید. چون درغیر این صورت (و در صورتی که روش دیگری هم استفاده نشه برای واترمارک)یا باید از خیر حفاظت عکس بگذرید یا از خیر عکس گذاشتن. اینجوری هم نمایش دادید و هم حفاظت. برای ذخیره هم ممکنه اگه عکس خیلی برای طرف مهم باشه بخواد print screen بگیره.
سلام prober عزیز
ممنون از آموزش خوبتون ولی خب معمولا استفاده ی Watermark اینه که اگر مطلب کپی برداری شد عکس نشونه ای از وبسایت شما داشته باشه وقتی که شما با HTML و CSS این کار رو انجام می دید دیگه در زمان Save عکس اون Watermark با عکس دالنود نمیشه و روی عکس نمی مونه !
پس خیلی فایده ای نخواهد داشت.
بازم مچکرم
ITPRO باشیم