سلام
امروز میخواستم عکسای یک کالکشنم رو از سایت 500px.com دانلود بکنم و به یه دردسر کوچیک خوردم. این سایت با چند تا کد ساده جلو اینو گرفته که شما بتونید عکسشو دانلود کنید. مثلا اینکه اگه با گوشی بازش کنید و انگشتتون رو نگهدارید رو عکس، اون کاری رو که انتظار دارید مرورگر شما بکنه نخواهید دید. با این کار توقع داریم که یه دیالوگ با امکان ذخیره عکس ببینیم درسته؟ اما طراح این سایت جلوی این کار رو گرفته و عملا هیچ دیالوگی به شما نشون داده نخواهد شد.
خب چیکار کنیم؟
برای خود من قدم بعدی اینجا تلگرامه. لینک صفحه رو میندازم توی تلگرام تا اونجا instant viewی تلگرام عکس رو برام بارگیری کنه و من ذخیرهش کنم. اما عه! جلوی اینم گرفتن.
خب خب. توی لپتاپ بازش میکنم و با کروم خیلی ساده یک راستکلیک و ذخیره عکس اما ده! اینجا جلوشو گرفته.
خب خب مجبورم که برم سراغ devTools و عکسو از اونجا باز کنم. اَههههههه چه گیر سه پیچی داده! روی عکس یه overlay گذاشته که وقتی این کارو میکنیم مستقیما به element عکس نرسیم.
چیکار میکنم؟ میرم سراغ یه extension یا همون افزونه دانلود عکس. خوبه اما بیشتر از چیزی که توقع دارم داره وقتمو میگیره. چیکار کنم؟
یه کد js نوشتم که آدرس صحفه رو بدم بهش عکسو برام دانلود کنه. آ آ! خیلی خنگم من، چون عکسو داره بعد از بارگذاری صحفه و توسط js باز میکنه با خوندن xml document صحفه چیزی گیرم نمیاد.
خب دیگه خودت خواستی. xpath عکسو برمیدارم. یه بوکمارک درست میکنم و کد ساده دانلود عکسو میذارم توی بوکمارک! حالا وقتی روی بوکمارک کلیک میکنم اون عکسی که توی اون قسمت مشخص صحفه گذاشته شده دانلود میشه. چه کاریه این همه دردسر؟
به نظر من چند تا خوبی داره:
۱- خیلی سریعه!
۲- هرجا توی گوگل لاگین کنم این بوکمارکو دارم! و میتونم راحت به بقیه در میونش بذارم. (share)
۳- هیچ چیزی برای اجراش نمیخواد
۴- برای هر شبکه اجتماعی یا بهتر بگم وبسایت، کافیه xpath اون چیزی که میخوام رو یک بار با devtools یک مرورگر بگیرم و تمام. یه بوکمارک جدید برای دانلود از اون شبکه اجتماعی.
۵- یه چیز خفنتر! میشه اون کدی که میخوای رو یک جای دیگه بذاری، مثلا روی یک سرور و اینجا با بوکمارک لودش کنی و اجراش کنی! چه کارایی که نمیشه باش کرد.
خب بریم سراغ کدش
البته شمایی که اینو میخونید استادید اما خب فقط برای نمونه، این محتوای بوکمارکه:
(function()%7Bvar a %3D document.createElement('a')%3B%0Aa.href %3D document.getElementsByClassName('photo-show__img')%5B0%5D.src%3B%0Aa.download %3D "output.png"%3B%0Adocument.body(a)%3B%0Aa.click()%3B%0Adocument.body.removeChild(a)%3B%7D)()%3B
چقدر ترسناک شد! من بلد نیستم به اینا قیافهی کد بدم یا واقعا ویرگول هیچ امکانی براش نداره؟
هرچی هست همونطور که میبینید این که function سادهس که عکسی که کلاس photo-show__img داره رو پیدا میکنه باهاش یه لینک میسازه، روش کلیک میکنه و از dom حذفش میکنه. اینو اگه توی 500px.com اجرا کنید عکسی که بازش کردید رو دانلود میکنه.
حالا برای هر شبکه اجتماعیای که سر کارتون میذاره همین کار کافیه. اینجا من با className عکسو پیدا کردم، یه جا ممکنه xpath لازم باشه، یه جا id یا یه خط کد بیشتر.
نظرتون رو بهم بگید [چشمک چشمک، چشمک].