Hatena Blog Tags
はてなブログ トップ
dataURL
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

dataURL

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
日常のプログラミングめも•2ヶ月前

base64エンコード形式の文字列データをページに埋め込む

概要 S3のプライベートバケットに保管されている画像を表示したい。 S3からオブジェクトを取得し、それをbase64エンコードしたものをData URLを使用してブラウザに埋め込み、画像を表示することを行なったので それをメモとして残します。 Data URL とは Data URL は data: スキームが先頭についたURLで、データをインラインで文書に埋め込むことができます。 スキーム(data:)、MIMEタイプ、base64トークン、データ自体の4つの部品で構成されます。 data:[<mediatype>][;base64],<data> データが文字の場合は、そのまま指定すること…

#Rails#画像#dataURL#base64

関連ブログ

iimon TECH BLOG•4日前

クリスマスカードを作りましたのでお送りします。

みなさまHappy December! どうでもいい話ですが、私は12月が1年の中で1番好きな月です。 街の雰囲気とか、冬らしさが出てきて「雪降らないかな〜」と勝手にワクワクする感じがなんともいえないのです！（先日ちょこっと降ったらしいのですが見逃しました。。ｷｨｨｨ） 文化等により様々な祝い方が存在するこの時期ですが、私個人的にはクリスマスカードを送り合う文化はなんとも素敵だなぁと思います。日本でいうところの年賀状のような感覚でしょうか。 少しだけ調べてみたのですが、初めてクリスマスカードが送られたのは1843年のロンドンだそうです。（ほぅ〜） そんなクリスマスカードも時代とともに発展し、今…

ローファイ日記•6日前

Ruby製の自作WASM Runtimeの実行時間を43%削った話

Ruby Advent Calendar 2024の20日目の記事です。 qiita.com 今年後半からWarditeという名前のPure Ruby WASM Runtimeを作り始めたのですが、 github.com udzura.hatenablog.jp その内部の話とかは今日は置いといて（東京Ruby会議12前夜祭で話しちゃおっかな）、今回、Warditeを作る上で計測しつつ高速化した話をします。と言いつつ、めちゃくちゃ基本的なことをしただけです。 なんとかgrayscale.wasmが完走したが遅い 以前grayscale処理を完走させた話をしました*1。 udzura.haten…

Techouse Developers Blog•21日前

Active Storageを使った画像のCORS対応で沼った話

この記事は、Techouse Advent Calendar 2024 5日目です。 昨日は nakayama さんによる 開発チームマネージャが考える、Techouseインターン生が圧倒的成長ができる3つの理由 でした。 はじめに こんにちは、2024年に新卒で入社し、ジョブハウスでバックエンドエンジニア/モバイルアプリエンジニアをしているnozomemeinです。 Ruby on Rails の Active Storage は お手軽に画像ファイルなどをクラウドストレージに保管できる便利なライブラリです。 しかし正しく利用するにはクラウドストレージの仕様やWeb標準への理解が必要不可欠で…

ローファイ日記•1ヶ月前

自作WASM Runtimeでグレースケール処理を動かすまで

あらすじ udzura.hatenablog.jp tl;dr 自作WASM Runtimeでグレースケール処理を動かした グレースケール処理はRustで書いたもの WebAssembly specificationはテストケース付きで公開されてるので便利

ギターマン十八号•4ヶ月前

CORS制約のあるページに張られている別ドメインの画像をzipにまとめてダウンロードさせるChromeアドオンを作った

github.com めっちゃくちゃ大変でした。 Misskey.ioでは、画像を media.misskeyusercontent.jp ってドメインから配信してるんです。 で、サービスURLは misskey.io というわけです。 これをChromeアドオンのContent Scriptなり、Script Injectでやろうとすると、fetch()がCORSに阻まれてできない。canvas経由も同じくCORSでダメ。 というわけで、CORS制約を受けないservice worker(background.js)でやろうとするんですが、これがまた大変でした。 URL.createObje…

Enjoy*Study•7ヶ月前

Markdownでスライドを作れるMarpがとても良かった(助けられた)

SQLをたくさん書いたスライドを作る必要があり、SQLはシンタックスハイライトした状態にしたかったので、 まずはMarkdownで元ネタ書いて、SQLはコードブロックで書いておく 上記を元にPowerPointにして、SQLはVS Code上でシンタックスハイライトしたものを張り付け といったことを考えていたのですが、スライドが大量になりそうなので(最終的に250ページなった)、PowerPointに持って行くのはしんどいな、、と思っていたところ、Marpというツールを見つけました。 Markdownで書いたものを、スライド形式にしてくれるツールです。 Marpの紹介自体はいろんな記事があるの…

Tech Hotoke Blog •9ヶ月前

RFC 2397に定義されたデータURLスキームを読んでみた。

これは何？ AntD Reactの実装中にImageコンポーネントを使った。 その際に、srcのフォーマットについて調べてみた。 Tips base64に変換されたPDFファイルの場合、Imageコンポーネントのsrcプロパティには、以下のような値を渡す必要がある。 data:application/pdf ; base64, <base64にエンコードされた文字列> このフォーマットについてはRFC 2397 - The "data" URL scheme に定義されている。 URLの形式はこちら data:[<mediatype>][;base64],<data> この仕様の目的 データの…

Mirrativ Tech Blog•9ヶ月前

モバイルアプリ上の WebAssembly 製ライブゲームで発生した例外を捕捉して計測する

こんにちは、エンジニアのちぎら(@_naru_jpn)です。ミラティブでは、配信中のゲームに視聴者が介入できるゲームとライブ配信が融合した次世代のゲーム体験を提供しており、この体験を ライブゲーミング と呼んでいます。 ライブゲーミングは、Unity から WebGL 向けにビルドされた WebAssembly 製のゲームを、アプリに配置したウェブブラウザ上で動作させることによって実現しています。*1 今回は UnityでモバイルWebGLゲーム開発を頑張る話 の「メモリリークによって発生するクラッシュ」にも書かれているような、捕捉は難しいがユーザー影響があるような例外の発生を捕捉して、計測を…