質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

3928閲覧

jpgの画像をドット絵風に表示したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

5クリップ

投稿2015/08/25 08:17

編集2022/01/12 10:55

モザイクを掛けたり、ぼかしたり、というエフェクトは簡単に使えるプラグインが見つかったのですが画像の減色処理をどうすればいいのかわからなく行き詰まってしまいました。
モザイクを掛けるだけでは今ひとつそれらしく表示できてない気がするので何とか減色したいのですが……

追記
pixelate.min.jsを使ってモザイクをかけていたのですが、
'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.
という警告が出てモザイクがかけられた画像も元の画像も表示されなくなってしまいました。この警告の通りに元のpixelate.min.jsを書き換えても何も変わりません。
何か別のモザイク処理が出来るプラグインは無いでしょうか?
環境は最新版GoogleChromeです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

まさにそのものが
wellflat/javascript-labs

追記
比較的シンプルだと思いますがどこがわかりませんか?
一応サンプル的な物書いてみました。

javascript

1// 元画像 2// <img id="Src" src="images/fruits.jpg" width="400" height="400"/> 3// 変換後画像 4// <canvas id="Result" width="400" height="400"></canvas> 5var ctx; 6$(function() { 7 // 変換後画像表示キャンバス 8 ctx = $('#Result')[0].getContext('2d'); 9 10 // 元画像の読み込みが終わったら画像変換開始 11 PixelCluster.load($('#Src')[0].src, function(data) { 12 // 解像度 13 var division = 50; 14 // 色数 15 var color = 20; 16 // アルゴリズム指定 17 var method = PixelCluster.KMEANS_PP; 18 PixelCluster.perform(division, color, method, function(result) { 19 PixelCluster.render(ctx, division, result); 20 }); 21 }); 22});

投稿2015/08/25 08:31

編集2015/08/25 12:57
sho_cs

総合スコア3541

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/08/25 10:53

申し訳ないです、たしかにこれは正に!っていう物なのですが使い方が全然分かりません… 簡単にでいいので解説していただけると嬉しいのですが…
sho_cs

2015/08/25 12:57

回答に追記しました。
退会済みユーザー

退会済みユーザー

2015/08/26 02:32

回答有難うございます。実際に試してみましたが、 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript" src="kmeans.js"></script> <script type="text/javascript" src="pixelcluster.js"></script> <script> var ctx; $(function() { // 変換後画像表示キャンバス ctx = $('#Result')[0].getContext('2d'); // 元画像の読み込みが終わったら画像変換開始 PixelCluster.load($('#Src')[0].src, function(data) { // 解像度 var division = 50; // 色数 var color = 20; // アルゴリズム指定 var method = PixelCluster.KMEANS_PP; PixelCluster.perform(division, color, method, function(result) { PixelCluster.render(ctx, division, result); }); }); }); </script> </head> <body> <img src="sample.JPG" id="Src" width="400" height="400" /> <canvas id="Result" width="400" height="400"></canvas> </body> </html> 書いていただいたサンプルをそのまま使ったのですが pixelcluster.js:18 Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///D:/Programming/intern/kmeans/lib/js/kmeans.js' cannot be accessed from origin 'null'.(anonymous function) @ pixelcluster.js:18(anonymous function) @ pixelcluster.js:289 kmeans.js:156 Uncaught TypeError: Failed to execute 'postMessage' on 'Window': 2 arguments required, but only 1 present.(anonymous function) @ kmeans.js:156 index.html:15 Uncaught TypeError: PixelCluster.load is not a function(anonymous function) @ index.html:15m.Callbacks.j @ jquery-1.11.3.min.js:2m.Callbacks.k.fireWith @ jquery-1.11.3.min.js:2m.extend.ready @ jquery-1.11.3.min.js:2J @ jquery-1.11.3.min.js:2 kmeans.js:156 Uncaught TypeError: Failed to execute 'postMessage' on 'Window': 2 arguments required, but only 1 present. と4つのエラーが。 何処がダメなのか全然分かりません
sho_cs

2015/08/26 02:39

1. jquery、kmeans.js、pixelcluster.jsはlib/js/配下に格納します 2. SecurityErrorはローカルで実行していることが原因です
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問