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

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

ただいまの
回答率

90.47%

  • JavaScript

    17003questions

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

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 5
  • VIEW 1,479

ARS

score 8

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

追記比較的シンプルだと思いますがどこがわかりませんか?
一応サンプル的な物書いてみました。
// 元画像
// <img id="Src" src="images/fruits.jpg" width="400" height="400"/>
// 変換後画像
// <canvas id="Result" width="400" height="400"></canvas>
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);
        });
    });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/25 19:53

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

    キャンセル

  • 2015/08/25 21:57

    回答に追記しました。

    キャンセル

  • 2015/08/26 11: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つのエラーが。
    何処がダメなのか全然分かりません

    キャンセル

  • 2015/08/26 11:39

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17003questions

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