// ==UserScript==
// @name         500px 图片下载
// @namespace    https://www.yffjglcms.com/
// @version      0.2.1
// @description  try to take over the world!
// @author       yffjglcms
// @match        https://*.500px.com/photo/*
// @match        https://500px.com/photo/*
// @grant        none
// @require      https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js
// @require      https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...

    setTimeout(function () {

        var img = ".photo-show__img"
        addBtn();

        $("body").on("click", "#dl1", ()=>{
            window.open( $(img).attr("src"))
        })

        $("body").on("click", "#dl", ()=>{
            var url =  $(img).attr("src")
            getImageBlob(url, (blob)=>{
                saveAs(blob, new Date() + ".png");
            })
        })

        // 添加导出按钮
        function addBtn() {
            $(img).before(`<div style="display:inline;z-index:999;"><button  id="dl">尝试保存</button><button id="dl1">新窗打开</button></div>`)
        }

        //获取图片的Blob值
        function getImageBlob(url, cb) {
            var xhr = new XMLHttpRequest();
            xhr.open("get", url, true);
            xhr.responseType = "blob";
            xhr.onload       = function() {
                if (this.status == 200) {
                    if(cb) cb(this.response);
                }
            };
            xhr.send();
        }

    }, 5000)
})();