LoginSignup
1

More than 5 years have passed since last update.

画像をドロップしてimgurにアップするまで。

Last updated at Posted at 2018-02-21

匿名掲示板には画像アップロードがないため、imgurはよく使われている。

cid 1つでapiからアップロードできる。1日1200枚程度まで。

cid取得

  1. sinup
  2. email確認
  3. cid取得 https://api.imgur.com/oauth2/addclient
   Application Name > ...
   Authorization Type > 末尾 Anonymous ... autulizationにチェック
   Authorization callback URL> https://demo.com
   Email > ...
//callbackは使わないけれども入力必要。
//Client secretはoauth用

アップロードイメージ


  sol(base64)
   .then(imup)
   .then((d)=>{img.src= d.data.link;return d.data.link})
   .then(save)
  ;

拡張用、縮小してアップ、フィルター掛けてアップ


  sol(base64)
    .then(datacut) ///return the re-new base64
    .then(imup)
    .then((d)=>{ ... })
    .then(save)
  ;

superagentを使ってアップ

fn.imup=function(cid,base64){
  //base64 is data:image/jpeg...,....
  let blob = fn.toBlob(base64)
  ,c =cid
  ,formData = new FormData()
  ;
   formData.append('type', 'file')
   formData.append('image', blob)  
   return req.post('https://api.imgur.com/3/upload.json')
    .set({ Accept: 'application/json', Authorization: `Client-ID ${c}`})
    .send(formData)
    .then(res=>res.body)
 }
;

cidは呼び出し側では自明なのでbindで引数を一つ落とす

imup =fn.imup.bind(this,cid)

全部

[data-cid]{
  min-width:50vw;
  min-height:50vh;
  background-color:aliceblue;
}
img{height:200px}
.drag{border:2px dotted}
<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/3.8.2/superagent.js"></script>
<div data-cid="61b7fa74eadb938"></div>
(function(root){
let req=root.superagent
,FormData=root.FormData
,fn=root.fn||{}
;
fn.ce=(d=>document.createElement(d))
fn.q=(d=>document.querySelector(d))
fn.toBlob =function(base64) {
     let ma = /^data:(.*);base64,(.*)$/
     ;
     if(!ma.test(base64)){ console.log('error base64 data'); return null}

     let ary = base64.match(ma)  //[0] base64, [1] type, [2] body
     ,type = ary[1]
     ,bin = atob(ary[2])
     ,buffer = new Uint8Array(bin.length).map( (d,i)=>{return bin.charCodeAt(i)})
     ,blob = new Blob([buffer.buffer], {type: type})
     ;
     return blob;
 }
;
fn.imup=function(cid,base64){
  //base64 is data:image/jpeg...,....
  let blob = fn.toBlob(base64)
  ,c =cid
  ,formData = new FormData()
  ;
   formData.append('type', 'file')
   formData.append('image', blob)  
   return req.post('https://api.imgur.com/3/upload.json')
    .set({ Accept: 'application/json', Authorization: `Client-ID ${c}`})
    .send(formData)
    .then(res=>res.body)
 }
;
fn.dnd= function(ev){
  let type=ev.type,mark ='drag'  //mark is .drag the custom class
  ;
  ev.stopPropagation();
  ev.preventDefault();
  if(type==='drop'||type==='paste'){
    //this paste hack, allow the chrome only.
    const flg= (type==='paste')
    ,files=(flg)?ev.clipboardData.items:ev.target.files||ev.dataTransfer.files
    ;
    ;[].slice.call(files)
     .filter(f=>f.type.match('image.*')) 
     .slice(0,10) //10 is limit
     .map((f)=>{ let r=new FileReader(); r.onloadend=caller;  r.readAsDataURL((flg)?f.getAsFile():f); })
   ;
   this.classList.remove(mark)
   return;
  }     
  if(type==='dragover'){ this.classList.add(mark);ev.dataTransfer.dropEffect = 'copy';return}
  if(type==='dragleave'){ this.classList.remove(mark);return}
}
;
  root.fn=fn;
})(this);

let target=fn.q('[data-cid]')
,cid=target.getAttribute('data-cid')
,imup =fn.imup.bind(this,cid)
,dnd=fn.dnd
,sol=(d=>Promise.resolve(d))
,save=(src)=>{
  /* url,url,url,url,....*/
  let str=localStorage.getItem(cid)||'';
  str += ',' +src;
  localStorage.setItem(cid,str);
}
,load=()=>{
  /*if old data, show */
  let str=localStorage.getItem(cid)||'';
  str.split(',').filter(d=>d.length!=0).forEach((src)=>{
    let img =fn.ce('img');img.src=src;
    img.setAttribute('title',src);    
    target.appendChild(img);
  })
}
,datacut=(base64)=>{
  /*if img cut, write here*/
  return base64;
}
;
function caller(ev){ //call by dnd
  let base64 = ev.target.result
  ,img =fn.ce('img')
  ;
  //if loading image, write the here.
  //img.src='...loading.gif'
  img.src='https://i.imgur.com/seuaOqf.gif'
  //
  target.appendChild(img);

  sol(base64)
    .then(datacut)
    .then(imup)
    .then((d)=>{
      img.src= d.data.link;
      img.setAttribute('title',d.data.link);
      return d.data.link
    })
    .then(save)
  ;
}
;
;['onpaste','ondragover','ondrop','ondragleave'].forEach(d=>target[d]=dnd)
document.body.onload =load
;

注意

imgur側はローカル環境での表示には規制がある。
アップ画像をローカルから表示しようとするとimgur側から403が返ってくる。
あくまでweb上で利用可能。github.io上なら問題なし。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1