docker imagesで出てくるimageをrepositryの名前部分一致指定で一括で削除したい場合。
docker rmi -f `docker images "hogename*" -q`
composeとかで、プレフィクス的に名前揃えたテスト用のコンテナ丸ごと消したりするのにたまに使う。けどすぐ忘れる。
タイトル通り。って何言ってんの感じのタイトルですが。
例えば、jsFidlleとかでちょっと試したい時。
手持ちのアイコン画像なんかを背景画像で指定して使おうとすると、
リソースはURL指定しかできないので困る。
そういう時に背景画像をCSS側にBase64でエンコードして埋め込める。
↓こういう事。
SVGのこういうデータを例えばこういうサイトでエンコードして、CSSに上記の感じで埋め込んであげればjsfidleでも画像の埋め込みが出来るというわけです。
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <title>icon-select-expand</title> <polyline points="17 9.5 12 14.5 7 9.5" style="fill: none;stroke: #717070;stroke-miterlimit: 10"/> </svg>
地味に便利。。。
VueでUIを作ってて、axios使用でajaxで画像ファイルを取得した後に、
そのデータを表示したり、ローカルに保存したりしたい。
その場合のやり方。
//リクエストヘッダでコレつけた方がいいっぽ
const config = {
responseType: 'arraybuffer'
}
//サーバに送信
this.$axios
.post('http://hogehoeg/sample.png', { data: 'somedata'}, config)
.then(response => {
//base64でエンコードしたい場合
let bstr = new Buffer(response.data, 'binary').toString('base64')
//blobオブジェクトにしたい場合
let blob = new Blob([response.data], { type: 'image/png' })
//imgタグをidでとって、srcにblobのObjectURLを突っ込んで画像表示する
let img = document.getElementById('img_tag_id')
let url = window.URL || window.webkitURL
img.src = url.createObjectURL(blob)
//保存させたい場合（ダウンロードっぽくさせたい場合）
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = 'download-filename.png'
link.click()
//Vueで別のコンポーネントにデータ渡したい場合はこんな感じ？
this.imgdata = response.data
})
base64でやる場合は、画像サイズは32kb未満くらいで考えた方が良いのかしら。まーあんま大きい画像はやめた方がよさそうですね。
ajaxで取ってきた画像ファイルとかをダウンロードっぽく保存させたい場合は前述の感じでやるっぽ。リンク作って、ﾛｰｶﾙのオブジェクトのURLを突っ込んで中で、Clickを発火させてる感じ？
ちょっとイレギュラーなやらせ方のような気もするんだけど、StackOverFlowとかいろいろ見てるとこのやり方しかないっぽいですかね？
で、いい感じにまとめてくれるのが↓のGitHubのリポジトリ
https://github.com/kennethjiang/js-file-download/blob/master/file-download.js
IE11だと上述のやり方じゃ上手くいかないらしく、それにも↑のリポジトリは対応してる。
これ使った方がいいと思う。車輪の再発明は控えたい。
あと、vueでaxios使う場合、下の感じで書くと、中でthisが使えない。
this.$axios
.post('http://hogehoeg/sample.png', { data: 'somedata'}, config)
.then(function(response){
this.dataval = ''//これ無理
})
で、これをやるには呼ぶ前に「let self = this」みたいにしておくのが昔見たやり方なんだけど、
最近の書き方的にはアロー関数でやるとthisもいける。
this.$axios
.post('http://hogehoeg/sample.png', { data: 'somedata'}, config)
.then(response => {
this.dataval = ''//これいける
})
Pythonで画像データのバイナリを文字列として取得したり、
逆にバイナリの文字列から画像データを起こしたりしたい場合。
Pillowを使用。
import io
from PIL import Image
#バイナリにしたい画像を読み込み
tmpimg = Image.open("./imgs/-.png")
with io.BytesIO() as output:
tmpimg.save(output,format="PNG")
contents = output.getvalue()#バイナリ取得
print(contents)#表示
tmpimg2 = Image.open(io.BytesIO(contents))#バイナリから画像に変換
tmpimg2.save('image_from_str.png')
#バイナリ文字列としてやる場合はこんな感じ
imgbytes_str = b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x0c\x00\x00\x00\x0c\x01\x03\x00\x00\x00l\xbb\xce\xa4\x00\x00\x00\x06PLTE\x00\x00\x00\xff\xff\xff\xa5\xd9\x9f\xdd\x00\x00\x00\x13IDATx\x9cc\xf8\xfc\x81\x01\x8e\x8c\r\x10\x08I\x1c\x00+\xcd\x10\xa5\xa0\xa1\xbf,\x00\x00\x00\x00IEND\xaeB`\x82'
img_from_str = Image.open(io.BytesIO(imgbytes_str))
img_from_str.save('image_from_str2.png')
