javascript - Javascript 3D 模型错误

Question

我需要支持编辑生成 3D 模型的脚本。但是，我一直在努力，因为我不断收到错误。

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = new Image();
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      var out = [];
      // convert image to grayscale and save in array
      for (var i = 0; i < imgData.data.length; i += 4) {
        var avg = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
        imgData.data[i] = avg;
        imgData.data[i + 1] = avg;
        imgData.data[i + 2] = avg;
        imgData.data[i + 3] = 255;
        out.push(avg / 255);
      }
      ctx.putImageData(imgData, 0, 0);
      output.value = JSON.stringify(out);
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}

<label>Image File:</label>
<br/>
<input type="file" id="imageLoader" name="imageLoader" />
<canvas id="imageCanvas"></canvas>
<textarea rows="10" cols="100" id="output"></textarea>

JsFiddle 链接

该代码应该创建一个类似于此链接中的图像的 3D 文件。我想要的图像是下面使用 OpenJSCAD 或 OpenSCAD 软件的 3D 模型。