投稿

ラベル(javascript)が付いた投稿を表示しています

base64で文字列化された画像のリサイズ用ツール

htmlではbase64により画像を文字列に変換することで 一々画像をアップロードしなくても直接ページに埋め込む事ができます ただ、表示サイズよりも大きな画像のままbase64化してしまうと、無駄に文字列も長くなってしまいます このページではbase64の画像を指定サイズにリサイズ(拡大、縮小)します 使い方 ・まだ画像がbase64化されていなければ画像ファイルの選択かドロップ ・既にbase64かされていれば上部のテキストエリアに文字列を入力 ・Width(幅)とHeight(高さ)を入力 ・Resizeボタンを押すと下部のテキストエリアにリサイズされた文字列と確認用に画像が表示されます ここにドロップでも可能 インターネット上の画像の場合 画像自体(https://~.png)を開き、右クリックしてFirefoxなら「要素を調査」をChromeなら「検証」を選択 そこからコンソールで下のフレーム内の文字列を実行すれば結果が出力される var img = document.querySelector('img');var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext('2d');ctx.drawImage(img,0,0);canvas.toDataURL(); このページでの直接取得やブックマークレットはCrossOriginで無理です Origin Width Height Resized

javascriptで指定色を等分したグラデーションの自動作成

分かりづらいタイトルなので実際のものを こんな感じ 実際のコードは以下 *枠線は除いてある <div style="background: linear-gradient(to right , pink 0 , pink 33.32% , palegreen 33.33% , palegreen 66.65% , lightskyblue 66.66% , lightskyblue 100%);"> 指定色 [ pink, palegreen, lightskyblue ] で等分したグラデーションになっている これをjavascriptで自動作成するには function gradientGen(colors) {     var texts = ['to right'];     var ratio = 100 / colors.length;     for (var i = 0; i < colors.length; i++) {         if (i != 0) {             texts.push(colors[i-1] + ' ' + ((ratio * i)-0.01) + '%');         }         texts.push(colors[i] + ' ' + ratio * i + '%');     }     texts.push(colors[colors.length-1] + ' 100%')     return 'linear-gradient(' + texts.join(',') + ')'; } var colorList = ['pink','palegreen','lightsk...