xgqfrms commented 5 years ago

HTML5 Canvas

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

https://www.html5canvastutorials.com/tutorials/html5-canvas-images/ https://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

https://www.w3schools.com/tags/canvas_drawimage.asp https://www.w3schools.com/graphics/canvas_images.asp

Canvas & Ruler

js canvas image

https://stackoverflow.com/questions/20434728/how-to-create-a-ruler-a-tool-for-canvas

https://mrfrankel.github.io/ruler/ https://github.com/mrfrankel/ruler/

https://github.com/MrFrankel/ruler/issues/12

demo

https://codepen.io/webgeeker/pen/KBLaVp

perfect demo

https://codepen.io/webgeeker/full/pZmRYe/

PS: re-render

CDN

https://cdn.xgqfrms.xyz/canvas/ruler/ruler.min.css https://cdn.xgqfrms.xyz/canvas/ruler/ruler.min.js


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description canvas ruler
 * @augments
 * @example
 *
 */

const canvasRuler = new ruler({
    container: document.querySelector(`#wrapper`)
});

let guides = ``,
    visible = true,
    visibleGuides = true;

// ruler
function setPosX(val){
    canvasRuler.api.setPos({
        x: val
    });
}

function setPosY(val){
    canvasRuler.api.setPos({
        y: val
    });
}

function setScale1(val){
    canvasRuler.api.setScale(val);
}

function hideRuler(){
    canvasRuler.api.toggleRulerVisibility(visibleGuides = !visibleGuides);
}

// guides
function clearGuides(){
    canvasRuler.api.clearGuides();
}

function storeGuides(){
    guides = canvasRuler.api.getGuides();
}

function setGuides(){
    canvasRuler.api.setGuides(guides);
}

function hideGuides(){
    canvasRuler.api.toggleGuideVisibility(visible = !visible);
}

function destory(){
    canvasRuler.api.destroy();
}

xgqfrms commented 5 years ago

IndexedDB

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

https://w3c.github.io/IndexedDB/

https://www.w3.org/TR/IndexedDB/ https://www.w3.org/TR/IndexedDB-2/ https://www.w3.org/TR/IndexedDB-3/

demo

https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

xgqfrms commented 5 years ago

Q: 这种在 IE 下的自定义滚动条，是如何实现的？

better-scroll

https://github.com/ustbhuangyi/better-scroll

https://www.viget.com/articles/better-scroll-and-resize-event-handling/

https://github.com/DDFE/DDFE-blog

xgqfrms commented 5 years ago

https://help.github.com/articles/opting-into-the-public-beta-for-a-new-dashboard/ https://www.zingchart.com/ https://zellwk.com/blog/crud-express-mongodb/

xgqfrms commented 5 years ago

image type

https://scantips.com/basics09.html

https://en.wikipedia.org/wiki/Image_file_formats


import "whatwg-fetch";

const fetchImage = (url = ``) => {
    let imageType = "png";
    if (url.includes(".jpeg")) {
        imageType = "jpeg";
    }
    if (url.includes(".jpg")) {
        imageType = "jpg";
    }
    if (url.includes(".gif")) {
        imageType = "gif";
    }
    return fetch(
        url,
        {
            method: "GET",
            mode: "no-cors",
            headers: {
                "Content-Type": `image/${imageType}`,
            },
        })
        .then(res => res.blob())
        .then(
            (blob) => {
                return blob;
            }
        ).catch(err => console.log(`fetch image error`, err));
};

fetch image blob bug


const showDOM = (url = ``) => {
    let imgBox = $qs(`[data-img-box="empty-banner-image-box"]`);
    let no_data = `
        <p data-no-data="p">
            <span data-no-data="span">暂无数据</span>
        </p>
    `;
    try {
        if (url) {
            let img = document.createElement(`img`);
            img.src = url;
            img.setAttribute(`data-img`, `empty-banner-image`);
            if (imgBox) {
                imgBox.innerHTML = "";
                imgBox.insertAdjacentElement(`beforeend`, img);
            }
        }
    } catch (err) {
        // no data
        imgBox.innerHTML = "";
        imgBox.insertAdjacentHTML(`beforeend`, no_data);
        throw new Error(`fetch image error`, err);
    }

    // fetchImage(url)
    // .then(blob => {
    //     let objectURL = URL.createObjectURL(blob);
    //     // <img src="" alt="" data-img="empty-banner-image" />
    //     let img = document.createElement(`img`);
    //     img.src = objectURL;
    //     img.setAttribute(`data-img`, `empty-banner-image`);
    //     if (imgBox) {
    //         imgBox.innerHTML = "";
    //         imgBox.insertAdjacentElement(`beforeend`, img);
    //     }
    // })
    // .catch((err) => {
    //     // no data
    //     imgBox.innerHTML = "";
    //     imgBox.insertAdjacentHTML(`beforeend`, no_data);
    //     throw new Error(`fetch image error`, err);
    // });
};

fetch image bug


const fetchImage = (url = ``) => {
    let imageType = "png";
    if (url.includes(".jpeg")) {
        imageType = "jpeg";
    }
    if (url.includes(".jpg")) {
        imageType = "jpg";
    }
    if (url.includes(".gif")) {
        imageType = "gif";
    }
    return fetch(
        url,
        {
            method: "GET",
            mode: "no-cors",
            headers: {
                "Content-Type": `image/${imageType}`,
            },
        })
        .then(res => res.blob())
        .then(
            (blob) => {
                return blob;
            }
        ).catch(err => console.log(`fetch image error`, err));
};

CORS & blob bug

xgqfrms commented 5 years ago

banner

http://www.wezhan.cn/syxd

http://www.wezhan.cn/newsitem/277053940

http://www.wezhan.cn/newsitem/277053941

xgqfrms commented 5 years ago

居转户

大家好，如需要办理且符合居住证积分及居转户条件的同学请到xxx处登记，截止时间本周五下班之前。

申办条件：居住证积分请到以下网站进行模拟打分，达到120分才可申办。
居转户的申办条件之前xx公共邮箱有发过的“持有<上海市居住证>人员申办本市常住户口（居转户）申办指南”查看。
积分模拟打分网址：https://jzzjf.12333sh.gov.cn/jzzjf/

https://jzzjf.12333sh.gov.cn/jzzjf/pingfen/index.jsp

单位账号以单位组织机构代码或统一社会信用代码为准，个人账号以身份证号码为准

https://jzzjf.12333sh.gov.cn/jzzjf/index2.jsp#view2

https://jzzjf.12333sh.gov.cn/jzzjf/index2.jsp#view3

https://jzzjf.12333sh.gov.cn/jzzjf/pingfen/query_score.jsp

xgqfrms commented 5 years ago

如果积分够了，没有注册过，那来的密码呀？怎么登录，看不懂呀？

https://jzzjf.12333sh.gov.cn/jzzjf/pingfen/mmczblsq.doc

xgqfrms commented 5 years ago

cookie & bug

https://github.com/js-cookie/js-cookie

https://stackoverflow.com/questions/51497459/what-does-a-cookie-with-1969-as-the-expiration-date-mean

Unix time was started at the beginning of 1970, that means that -1 is in 1969. And that is a commonly used value for "unknown" if the expected value is usually positive. And for cookies MaxAge a negative value means that the cookie is not stored persistently and will be deleted when the Web browser exits.

https://stackoverflow.com/questions/21226438/javascript-date-object-returning-december-31st-1969

https://github.com/senchalabs/connect/issues/670

xgqfrms commented 5 years ago

swagger

https://swagger.io/solutions/api-design/

https://swagger.io/tools/swagger-editor/

xgqfrms commented 5 years ago

https://github.com/xgqfrms-GitHub/swagger-api

https://github.com/xgqfrms/swagger-api/issues

xgqfrms commented 5 years ago

https://github.com/xgqfrms/swagger-api/issues/4

https://github.com/xgqfrms/swagger-api/issues/3

xgqfrms commented 5 years ago

https://swagger.io/tools/swagger-editor/download/

xgqfrms commented 5 years ago

https://editor.swagger.io/

https://swagger.io/docs/specification/describing-request-body/

https://app.swaggerhub.com/apis/xgqfrms/test/1.0.0#/

https://davidwalsh.name/fetch


// fetch(url, {
//           method: "GET",
//           mode: "cors",
//         //   cache: "no-cache",
//         //   credentials: "same-origin",
//           headers: {
//               "Content-Type": "application/json; charset=utf-8",
//               // "Content-Type": "application/x-www-form-urlencoded",
//           },
//           redirect: "follow",
//           referrer: "no-referrer",
//           body: JSON.stringify(data), // body data type must match "Content-Type" header
//       })
//       .then(response => response.json()) // parses response to JSON
//       .catch(error => console.error(`Fetch Error =\n`, error));
//   };

const url = `https://petstore.swagger.io/v2/pet/1`;

fetch(
    url,
    {
        method: "GET",
        mode: "no-cors",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            // "Content-Type": "application/json; charset=utf-8",
        },
    })
    .then(res => res.json())
    .then(
        (json) => {
            console.log(`json =`, json);
        }
    ).catch(err => console.log(`fetch json error`, err));
/*
// OK

const url = `https://petstore.swagger.io/v2/pet/1`;

fetch(
    url,
    {
        method: "GET",
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        },
    })
    .then(res => res.json())
    .then(
        (json) => {
            console.log(`json =`, json);
        }
    ).catch(err => console.log(`fetch json error`, err));

fetch(
    url,
    {
        method: "GET",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
    })
    .then(res => res.json())
    .then(
        (json) => {
            console.log(`json =`, json);
        }
    ).catch(err => console.log(`fetch json error`, err));

const url = `https://petstore.swagger.io/v2/user/login?username=abc&password=123`;

fetch(
    url,
    {
        method: "GET",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
    })
    .then(res => res.text())
    .then(
        (json) => {
            console.log(`json =`, json);
        }
    ).catch(err => console.log(`fetch json error`, err));

*/

xgqfrms commented 5 years ago

GET & ?queryString & ObjectString

"Content-Type": "application/x-www-form-urlencoded",


let url = `https://petstore.swagger.io/v2/user/login?{"username":"abc","password":"123"}`;

fetch(
    url,
    {
        method: "GET",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
    })
    .then(res => res.text())
    .then(
        (text) => {
            console.log(`text =`, text);
        }
    ).catch(err => console.log(`fetch text error`, err));

https://editor.swagger.io/