svg / canvas出力ができるbodymovinの紹介 - KAYAC engineers' blog
やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で１番プログラムできないおじさんの町田（@machida-yousuke）と申します。 今回は、「映像業界?フロントエンド業界？が注目しているオープンソースライブラリ bodymovin」について紹介します。 ちなみに私は、元某インターネット広告代理店の映像クリエイター兼フリーランスのモーショングラフィッカーでした。 ※この記事はAfterEffects（以下「AE」と称する）の基本的な操作、用語を理解している前提で進めていきます。 ※bodymovinのバーションは V 4.6.10、AEのバーションはadobe AfterEffects cc 2017で進めていきます。 （V 4.6.10から使用言語によっておきるバグの修正がされています。） ※使用PCはMacです。 bodymovinとは AE
Canvas でカラーハーフトーン : document
8月21 Canvas でカラーハーフトーン はじめに ネット上で Photoshop にはカラーハーフトーンというフィルタがあることを知って、面白そうなので実装してみました。 適当にググってカラーハーフトーンフィルタを使った画像を見ながら「多分こういうものだろう」と考えて実装したものなので Photoshop のものとは大きく異なる可能性があります。 カラーハーフトーンってなに 元々は網点という印刷まわりの技法のようですが、Photoshop のものは完全に画像の効果としてあつかった方が良いみたいです。 ネットで使用例を見た感じ、各色ごとに指定された角度の正方形に画像を分割して、色の多いところは大きく、少ないところは小さく円を描いて水玉模様みたいにする効果だと思います。 実装1: 独自実装(わりとゴリ押し) (0, 0) から角度と正方形のサイズから dx, dy を計算してそれを加算し
Vector Halftone Maker - Interactive PNG/SVG halftone pattern generator
Illustration by © Sevnzel. Attention: Diversion of source images are prohibited. About Created by Xoihazard (微博/Weibo) Build: Wed Jun 01 2022 04:04:23 GMT+0000 (Coordinated Universal Time) This program performs image processing on the browser. No image files are uploaded to the remote server. Enjoy! 这个程序在浏览器上进行图像处理。不会将任何图像文件上传到远程服务器。请享用！ このプログラムはブラウザ上で画像処理を行います。画像ファイルをリモートサーバーにアップロードすることはありません。お楽し
Breathing Halftone
Breathing Halftone Images go whoa with lots of floaty dots Made for Yaron Install breathing-halftone.pkgd.js breathing-halftone.pkgd.min.js Usage // get the image // jquery var img = $('#hero img')[0]; // or vanilla JS var img = document.querySelector('#hero img'); // init halftone new BreathingHalftone( img, { // options... }); Browsers that do not support <canvas> will fall back to the original
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
キャンバスの最適化 - Web API | MDN
« 前のページ 次のページ » <canvas> 要素は、ウェブで二次元グラフィックを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリがキャンバス API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、キャンバス要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。
ExifのOrientationを見たうえでcanvasに画像を表示できるJSライブラリ
先日、画像を縮小して表示するページを作成してこのブログで紹介しました(JavaScriptで縮小画像の作成 | while(isプログラマ))。 ただ、このページからiPadやiPod touchで開いたうえで、ファイルの選択から『写真を撮る』を選び、縦向き(縦長)にして写真を撮ってみると、縮小した写真は横向きに表示されてしまいました。これは、写真が標準で縦表示になっているわけではなく、Exif情報のOrientation(向き情報)によって縦方向の写真となっているためにおこります。HTML5のcanvasではどうやらExif情報を考慮してくれないようで、そのため縦に撮った写真が横に表示されてしまったというわけです(それどころか、Orientationによって縦表示とされている写真をimgタグで普通に表示させても、PCのブラウザからは横表示になってしまうという)。 ただ、これでは少し困るの
html - DOMを画像に書き出す方法 - スタック・オーバーフロー
この回答にも書きましたが、「指定の HTML 要素を Canvas に描画して、それを画像データに変換すること」でいけます。 さすがに2回目なので、なにか html2canvas ライブラリを使用して、動くサンプルコード書きますね。 以下のコードでは、「Take a shot」 ボタンを押すと、画像の生成と、ダウンロードボタンを生成します。 function screenshot( selector) { var element = $(selector)[0]; html2canvas(element, { onrendered: function(canvas) { var imgData = canvas.toDataURL(); $('#screen_image')[0].src = imgData; $('#download')[0].href = imgData; $('#do
videoタグの動画をcanvasを使って表示する | スターフィールド株式会社
html5のvideoタグを使って動画をサイトに組み込む場合、スマホで動画を再生するとフルスクリーン表示になってしまいます。iosは基本的にフルスクリーン表示になるはずです。 動画上をクリックして表示されている物の情報を出すなどインタラクティブなサイトを作ろうとすると、このフルスクリーン表示が問題になってしまいます。 今回はこのフルスクリーン表示を何とか解消できないかと思い、videoタグの動画をcanvasに出力する方法を探ってみました。 videoタグの動画をcanvasに切り取る demo1 まずはhtmlです。videoタグで動画を設置して、動画の出力先となるcanvasと動画を出力させるためのbuttonも作っておきます。 <video controls id="v" width="480px" height="270px"> <source src="video/sample1
D3.jsとFabric.jsを使ってcanvasに描画する
d3.js Advent Calendar 2013 4日目の参加記事です。 以前も、Fabric.jsについては書いたことがあるのですが、D3とFabricの組み合わせにはいろいろな可能性を感じるので、布教のつもりで改めて記事にしたいと思います。 Fabricは、HTML5のcanvas要素を使いやすくするJavaScriptのグラフィックライブラリです。 最近では、Canvas は、私たちが、全く 驚くべき グラフィックス をウェブ上で作ることを可能にしました。しかし、 CanvasのAPIが提供するのは、残念ながら低水準です。 もし、私たちが単に基本的な図形を canvas上にほとんど描きたいと思わず、そのことを忘れてしまえば別ですが、 どんな形にせよインタラクションが必要になったり、 いかなる点であれ、絵の変更が必要になったり、もっと複雑な図形を 描くことが必要になったら、状況は一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 translate method, how to reset to default?
Paper.js
Fabric.js Javascript Canvas Library
jQuery Image Halftone
Color halftone filter for canvas 2D Patrick Matte
Draw CSS transformation (Scale, Rotate, Left, Right) on Canvas
Day 10 – Drawing rotated images into canvas
画像をクライアント側で縮小してプレビューした後にアップロードする | egashira.jp
https://miko.art/labs/x-test/max-canvas-size/
Water ripple effect. - JSFiddle