前提・実現したいこと
皆様はじめまして、閲覧ありがとうございます。
イメージとしては、
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}
回答1件
あなたの回答
tips
プレビュー