写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
2-1. リサイズ処理 Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co
「Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装」の実装方法 - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
canvasのgetImageData(), toDataURL()などにおけるCORSについて - 愛と勇気と缶ビール
僕のcanvas力はいまだ中学生男子並みなので、そもそもcanvasの一部のAPIにSame Origin Policy的なものが適用されることすら今日まで知らなかったのですが、どうやら 違う生成元がsrcに指定されているimgをputImageData -> その描画領域をgetImageDataしようとするとDOM Exception という感じに、普通に怒られちゃうみたいですね。知らんかった。 http://www.w3.org/TR/cors/#use-cases ↑のあたりに書いてあるのをみると、taintedなcanvas、というのですかね。getImageDataで同じ生成元から読み込んだimgの描画部分を指定しても怒られないけど、違う生成元の画像を描画した部分に少しでもかかっていると怒られるので、canvasってピクセルごとに "taintedか、そうでないか" を管理して
How To Optimize Images With HTML5 Canvas — Smashing Magazine
If you really care about your visitors, then read this post in which Sergey Chikuyonok demonstrates how to optimize images with HTML5 Canvas. Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-
XMLHttpRequestでファイルをDataSchemeで取得する実験 その3 (Kanasansoft Web Lab.)
// ==UserScript== // @name getFileByDataScheme // @namespace http://www.kanasansoft.com/ // @include * // ==/UserScript== ( function(){ var parseHTTPHeader=function(responseHeader){ var headers=responseHeader.split("\n"); var len=headers.length; var parsing=[]; for(var i=0;i<len;i++){ if(/^$/.test(headers[i])){ }else if(/^[\x09\x20]/.test(headers[i])){ if(parsing.length==0){ throw "SyntaxError:HTT
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JS-ImageDiff Demo
GREE Engineering
GitHub - antimatter15/jsgif: Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS