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

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

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

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

Q&A

解決済

1回答

333閲覧

文字の手描き判定をしたい

repomn

総合スコア12

JavaScript

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

0グッド

0クリップ

投稿2019/05/28 03:19

編集2019/05/28 09:37

前提・実現したいこと

皆様はじめまして、閲覧ありがとうございます。
イメージとしては、
1000x1000の「A」と書かれたPNG画像を表示し、
ユーザーはその上にある透明のCanvasになぞって書き込みをします。

元の画像と、ユーザーが書いた画像の差分を取りたく、
resemblejsやlooks-same等のライブラリを用いて、差分やミスマッチ度までは取れたのですが、
やりたいのは「元のAからどれだけはみ出ているか」の数値化です。

該当するライブラリがあればいただけると助かります。

該当のソースコード

書いた内容をはしょって書いておきます。
canvasに書いた内容は、dataURLで取得しているため、比較時に元の画像もdataURL化しています。

js

1import resemble from 'resemblejs' 2 3/* 4 drawedCanvas: ユーザーのtouchmoveをstroke済 5 width: canvasWidth 6 height: canvasHeight 7*/ 8function calcDiff(drawedCanvas, width, height) { 9 // ユーザー表示サイズでimg要素を作成 10 const img = new Image() 11 img.src = '/img/hoge.png' 12 img.width = width 13 img.height = height 14 15 const newCanvas = document.createElement('canvas') 16 newCanvas.width = width 17 newCanvas.height = height 18 19 // 画像の同期後に比較開始 20 img.onload = () => { 21 let newCtx = newCanvas.getContext('2d') 22 newCtx.drawImage(img, 0, 0, width, height) // ユーザー表示サイズで画像を描画 23 24 let a = canvas.toDataURL() 25 let b = newCanvas.toDataURL() 26 27 resemble.compare(a, b, options, (err, data) => { 28 console.log(data) 29 /* 30 { 差分情報 } 31 */ 32 }) 33 } 34}

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

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

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

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

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

m.ts10806

2019/05/28 06:11

時々化けてますが、 >書き込み >元の画像 ご調整願えますか?
repomn

2019/05/28 09:38

ご指摘ありがとうございます。 Macからの入力で時々なってしまうようですね、、 該当箇所修正いたしました※内容に変わりはありません
guest

回答1

0

自己解決

解決しました。

方法としては、
canvas.globalCompositeOperation = 'destination-out'
canvas.globalCompositeOperation = 'destination-in'
を使って、画像の差分を出力&画素数の判定をしました。

皆様ありがとうございました!

投稿2019/05/28 14:33

repomn

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問