// ==UserScript==
// @name         搞定设计稿定设计去水印
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @require      https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
        function remDel(num){
                    Array.from(num).forEach(node=>{
                        node.parentNode.removeChild(node)
                    })
     }
    setTimeout(function(){
        //var addScr=document.createElement("script");
        //创建script标签
        var textareas = document.getElementsByClassName('editor-watermark');
        //获取水印class
        var textareasTab = document.getElementsByClassName('remove-watermark');
        var textareasTabT = document.getElementsByClassName('editor-remove-watermark');
        //获取按钮左边的会员提示class
        console.log(textareas)
        var getHtml = document.getElementsByTagName('body');
        var paraDowld=document.createElement("button");
            //创建按钮标签
        var nodeDowld=document.createTextNode("下载");
            //添加”下载“
        paraDowld.appendChild(nodeDowld);
            //在按钮里面添加文字
        paraDowld.style.paddingRight = '10px';
        //给按钮添加右边距
        //addScr.src = 'http://html2canvas.hertzen.com/dist/html2canvas.min.js';
        //getHtml[0].appendChild(addScr);
            //插入外部样式到body

        //⬇️判断如果水印的数量大于0则运行
    if(textareas.length>0){
            var para=document.createElement("button");

            var node=document.createTextNode("去水印");
            //添加”去水印“
            para.appendChild(node);
            //在按钮里面添加文字
            para.style.paddingRight = '10px';
            //给按钮添加右边距

            //⬇️给按钮添加点击事件
            para.addEventListener('click',function(){
                remDel(textareas)
                remDel(textareasTab)
                remDel(textareasTabT)



           const canvas=document.getElementsByTagName('canvas')
           console.log(canvas)
           remDel(canvas)
        })
        console.log(para)

        var element=document.getElementsByClassName('eui-buttons-bar');
        if(element.length>0){
            console.log(element)
            element[2].appendChild(para);
            element[2].appendChild(paraDowld);
        }else{
            var elementTow=document.getElementsByClassName('editor-tools')
            console.log(elementTow)
            elementTow[0].appendChild(para);

        }


        }
        paraDowld.addEventListener('click',function convert(){

            //var canvasClass = document.getElementsByClassName('editor-canvas');
            var canvasClass = document.getElementsByClassName('design-editor');
            //获取画布

            var str = document.getElementsByClassName('canvas-view')[0].textContent;
            console.log(str);
            var numArr = str.match(/\d+/g);
            //提取宽高

            //alert(numArr[0]);

            console.log('画布-宽'+numArr[0]);
            console.log('画布-高'+numArr[1]);
            //alert('画布-宽'+canvasClassW+'画布-高'+canvasClassH);

             //document.body.appendChild(canvasClass[0])
            //const div =document.createElement("div")
            //div.setAttribute('class','editor-canvas')
            const deepNode=canvasClass[0].cloneNode(true)
            //document.body.appendChild(deepNode)
            var copy = document.getElementsByClassName('editor-canvas');
            console.log(canvasClass[0])
            console.log(deepNode)
                html2canvas(deepNode,{
                    width:numArr[0],
                    height:numArr[1],
                }).then(canvas => {
                    var imgUrl = canvas.toDataURL("image/png", 1); // 此方法可以设置截图质量（0-1）

                    console.log("base64编码数据：", imgUrl);


                    //alert(imgUrl);

            }).catch(e=>{
                console.log(e)
                })
        })

    },3000);

        // Your code here...
})();