saucenao和trace.moe api的使用

saucenao是一个很强大的识图网站。但是关于它api的使用，官网设置得挺不起眼的，一直容易被人忽视。

要注册账号获取api key，才能使用它的api。

注册：https://saucenao.com/user.php

api key：https://saucenao.com/user.php?page=search-api

演示：

//因为会出现跨域的问题，所以用后端node的方式请求

const axios = require('axios')

async function fn(){

    const data = await axios.get('https://saucenao.com/search.php',{

    params:{

        url: imageURL,

        db:999,

        api_key: ApiKey,

        output_type:2,

        numres: 3

     }

 })

}

fn()

 参数说明

url	（必填）https://的形式
db	（必填）999
api_key	（必填）
output_type	（选填 | 默认是0）返回数据的格式 0是html数据 1是xml数据 2是json数据
numres	（选填）请求返回的结果数量

trace.moe是个强大的识别动画作品的网站。

api文档：https://soruly.github.io/trace.moe/#/

首先是在html文件中放一张图片，然后创建canvas，将这张图片转成base64的数据。

图片最好使用本地图片测试，否则会出现跨域问题。

var img = document.querySelector("img"); 

var canvas = document.createElement("canvas");

canvas.width = img.naturalWidth;

canvas.height = img.naturalHeight;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

 

var baseImg = JSON.stringify({ image: canvas.toDataURL("image/jpeg", 0.8) });

 官方用的是fetch，我习惯用axios，而且用axios有个注意点，这里我就用axios演示一下。

import axios  from  'axios'

async function fn(){

    try{
        const data = await axios.post('https://trace.moe/api/search',  baseImg, {

        headers:{

            "Content-Type": "application/json"

         }

    })

    console.log(data)

    }catch(e){

        console.log(e)

    }

}

fn()

axios的数据是直接传入数据的，而不是用params。要启动web服务器打开，也就是npm run serve 的状态下打开，才会发送请求。

 用模块化导入有个问题就是要打包，嫌打包麻烦的还是用fetch把。