クリップボードの画像を得る Javascript＋PHP

処理の基本

あらかじめクリップボードに画像をコピーしている
HTML要素に対してクリップボードから張り付けを行うことで、クリップボードの画像を読み込む


function set_onpaste (_dom, _func=null) {
    _dom.onpaste= (_e)=> { // 要素_domにペーストしたときの処理
        let items= _e.clipboardData.items;
        if (items[0].type.indexOf('image')!=0) return false; // 画像以外は弾く
        let file= items[0].getAsFile(); // 画像データをfileに格納
        let reader= new FileReader();
        reader.readAsDataURL(file); // 画像データに処理を実行する
        if (_func) reader.onload= (__e)=> {_func(__e.target.result)} // 実行内容は_funcに
    }
}

__e.target.result がペーストした画像のbase64
例えば、以下のように_funcを設定すれば、boxに張り付けた画像をviewに表示できる


let box= [[app_dom]](document.body,'div','paste here'); // 画像をペーストする場所
let view= app_dom(document.body); // ペーストした画像を表示する場所
set_onpaste(box, (_png64)=>{
    view.innerHTML= '';
    let img= [[app_dom]](view, 'img', '', [ ], {src: _png64}); // img.src= _png64とすることで、画像を表示する
});

phpでpngファイルとして保存

reader.onload(e)のe.target.resultにbase64が入っている
ここからdata:image/png;base64,を取り除き、base64_encodeすればpngファイルを作れる

js側


let box= [[app_dom]](document.body,'div','paste here'); // 画像をペーストする場所
let res= app_dom(document.body); // 実行結果を表示する場所
let view= app_dom(document.body); // ペーストした画像を表示する場所
set_onpaste(box, (_png64)=>{
    view.innerHTML= ''; // 画像を表示する領域を空白に
    let img= app_dom(view, 'img', '', [ ], {src: _png64}); // 領域に画像を表示
    let btn= app_dom(view, 'button', 'save'); // 領域にsaveボタンを表示
    btn.onclick= ()=> { // saveボタンを押したら
        save_png64 (_png64, (_txt)=>{ // 画像_png64を保存する
            res.innerHTML= _txt;
        });
    };
});
function save_png64 (_png64, _func=null, _file='test.png', _php='save_png64.php') {
    let key= 'data:image/png;base64,';
    if (_png64.indexOf(key)==0) _png64= _png64.substr(key.length); // 画像ファイルに必要な部分だけ取り出す
    let form= new FormData();
    form.append('file', _file); // 保存するファイル名
    form.append('png64', _png64); // 画像base64
    fetch (_php, {method: 'post', body: form}) // phpに画像を送信
    .then((_r)=>{return _r.text()})
    .then((_t)=>{if(_func) _func(_t)})
}

php側

base64をpngファイル用に変換してファイルに書き出す


file_put_contents ($_POST['file'], base64_decode($_POST['png64']));
echo 'saved';