Giter VIP home page Giter VIP logo

pixichan-base64's Introduction

PixiChan

Build Status Coverage Status Codacy Badge

Description

Pixichan allow you to render images from https://pixiv.net. It will render into base64 format. If you following this url : https://i.pximg.net/img-original/img/2018/05/25/01/35/43/68906096_p0.png It will return to 403 : Forbidden it means you forbidden access to this link directly. So, this repository will handle this problem.

Installation

npm install --save pixichan

Example

Basic example :

const PixiChan = require('pixichan');
PixiChan('https://i.pximg.net/img-original/img/2018/05/25/01/35/43/68906096_p0.png')
.then((response)=>{
  console.log(response)
})

You can check following this item for more examples.

  1. Express.js - Render image directly
  2. Express.js + Vue.js - Render image to HTML

API Reference

const PixiChan = require('pixichan')

Constructor
Initialize new Pixichan.

PixiChan(url)
Param Type
url string

Error

Description Reason
'Invalid URL of Pixiv image. ' You can't put basic url in constructor
Url must following this format http/s?*.(jpg/png/)

Regex details : /(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png)/

Usage guide

  1. Using Express.js If you want to see image directly without any implementation to HTML, you can following this example

    routes.js

    Router.get('/', ({res}) => {
      PixiChan(URL).then((response)=>{
        res.writeHead(200, {'content-type': 'image/png'})
        res.end(response, 'binary')
      })
    }) 
  2. Using Express.js + Vue.js If you want to render image into HTML, you can following this example. PS : Actually, this is not for Vue only. You can implemented this way to another Framework.

    routes.js

    Router.get('/', ({res}) => {
      PixiChan(URL).then((response)=>{
        const Test = Buffer.from(response, 'binary').toString('base64');
        res.end(Test)
      })
    }) 

    main.vue

    <template>
      <div class="Image">
        <img :src="'data:image/jpeg;base64,'+imageBytes">
      </div>
    </template>
    
    <script>
    import axios from 'axios';
    export default {
      data() {
        return {
          imageBytes: '',
        };
      },
      created() {
        axios.get('http://localhost:3000/api').then((response) => {
            this.imageBytes = response.data;
        });
      },
    };
    </script>

    PS : You can't using this library directly to frontend. You should using Node.js or another framework of JS Backend.

pixichan-base64's People

Contributors

adefirmanf avatar renari avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.