xgqfrms commented 6 years ago

fetch api & image

fetch image url

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

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful


    fetch("http://example.com/movies.json")
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        console.log(myJson);
    });

    //  https://cdn.xgqfrms.xyz/logo/icon.png
    fetch("http://example.com/flowers.jpg")
    .then(function(response) {
        if(response.ok) {
            return response.blob();
        } else {
            throw new Error('Network response was not ok.');
        }
    }).then(function(myBlob) { 
        var objectURL = URL.createObjectURL(myBlob); 
        myImage.src = objectURL; 
    }).catch(function(error) {
        console.log('There has been a problem with your fetch operation: ', error.message);
    });

xgqfrms commented 6 years ago

canvas & image

https://stackoverflow.com/questions/164181/how-to-fetch-a-remote-image-to-display-in-a-canvas

https://cloudinary.com/documentation/fetch_remote_images https://www.quora.com/How-do-I-fetch-image-from-a-MySQL-database-in-PHP

xgqfrms commented 6 years ago

https://medium.com/front-end-hacking/fetching-images-with-the-fetch-api-fb8761ed27b2

https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data

http://techstream.org/Bits/Uploading-Image-using-fetch-api

https://stackoverflow.com/questions/164181/how-to-fetch-a-remote-image-to-display-in-a-canvas

https://davidwalsh.name/fetch

xgqfrms commented 6 years ago

css3 & linear-gradient

background

https://www.w3schools.com/css/css3_gradients.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

https://css-tricks.com/snippets/css/css-linear-gradient/ https://css-tricks.com/css3-gradients/

xgqfrms commented 6 years ago

Content-Type: image

https://msdn.microsoft.com/en-us/library/ms527550(v=exchg.10).aspx

https://www.lifewire.com/mime-types-by-content-type-3469108

https://stackoverflow.com/questions/23820011/set-the-header-content-type-image-any-img-format

OK


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

fetchImage("https://cdn.xgqfrms.xyz/logo/icon.png")
.then(blob => {
    let objectURL = URL.createObjectURL(blob);
    let img = document.querySelector(`[data-img="empty-banner-image"]`);
    img.src = objectURL;
}).catch(error => console.log(`There has been a problem with your fetch operation: \n`, err.message));

xgqfrms commented 6 years ago