前提
Rails7.0でimportmapを使用してjavascriptの画像処理を組み込もうとしています。
実装後、目的としていた画像の変換が行われず、Chromeの検証機能で確認したところ以下のエラーメッセージが発生していました。
実現したいこと
- Rails7.0で javascriptのファイルを実行したい
エラーメッセージ(Chromeの検証機能より)
Uncaught TypeError: Cannot set properties of undefined (setting 'load') at dot2:436:21 at dot2:442:
該当のソースコード(一部抜粋)
javascript
1(function () { 2 var PixelCluster; 3 var _root = this; 4 5 if(typeof exports !== 'undefined') { 6 PixelCluster = exports; 7 } 8 9 var ctx = null, 10 image = null, 11 imgData = null, 12 worker = new Worker('lib/js/kmeans.js'); 13 14 var core = { 15 load: function(fileName, onComplete, onError) { 16 ctx = document.createElement('canvas').getContext('2d'); 17 image = new Image(); 18 imgData = null; 19 image.addEventListener('load', function(e) { 20 var img = e.target; 21 ctx.canvas.width = img.width; 22 ctx.canvas.height = img.height; 23 ctx.drawImage(img, 0, 0); 24 imgData = ctx.getImageData(0, 0, img.width, img.height); 25 if(typeof onComplete === 'function') { 26 onComplete(imgData, new Date()); 27 } 28 }, false); 29 image.addEventListener('error', function() { 30 if(typeof onError === 'function') { 31 onError(); 32 } 33 }, false); 34 image.src = fileName; 35 }, 36 perform: function(division, ncluster, method, onComplete, onError) { 37 var features = core.extractFeatures(division); 38 if(typeof onComplete === 'undefined') { 39 var codebook = core.kmeans(features, ncluster, method); 40 var result = core.vq(features, codebook["centroids"], codebook["code"]); 41 return result; 42 } else { 43 var message = {"samples":features, "ncluster":ncluster, "method":method}; 44 worker.postMessage(message); 45 worker.addEventListener('message', function(e) { 46 e.target.removeEventListener('message', arguments.callee); 47 if(typeof onComplete === 'function') { 48 onComplete(e.data); 49 } 50 }, false); 51 worker.addEventListener('error', function(e) { 52 e.target.removeEventListener('error', arguments.callee); 53 if(typeof onError === 'function') { 54 onError(); 55 } 56 }, false); 57 return true; 58 } 59 } 60 }; 61 // public APIs 62 PixelCluster.load = core.load; //ここのloadが未定義となっている 63 PixelCluster.perform = core.perform; 64}).call(this)
試したこと
前提の確認
画像のプレビュー機能
上記ページを参考に作成したjavascriptのファイルは実行できたので、importmapは正しく機能しているように見えています。
以下、エラーに対して
オブジェクト初期化子の使用
リテラル表記法の書き方が間違っているかと思い上記ページで確認しましたが、解決策とみられることを見つけられませんでした。
ECMAScript 2015 での新しい表記法
上記ページを参考にエラーの該当部を略記法で書き直してみましたが状況は変わりませんでした。
load: function(fileName, onComplete, onError) {
↓
load(fileName, onComplete, onError) {
補足情報(FW/ツールのバージョンなど)
Rails7.0
Ruby3.1
初心者質問となりますがよろしくお願いいたします。

バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/11 11:05