Question

在这一点上，我仍然对JS还是陌生的，但是我需要提出一种通过Three.js和Fabricjs调用纹理变量的特定方法。

var img = document.createElement('img');    
//Upload image to fabric.js canvas. Exists as a reader.onload function inside of a document.getElementByID function in which the final image texture is defined by...
    document.getElementById('file').addEventListener("change", function (e) {
      var file = e.target.files[0];
      var reader = new FileReader();
      reader.onload = function (f) {  
        var data = f.target.result;
        //Declare img as global scope if we need to call it first? Declaring it here gets us nowhere.  
        //var img = document.createElement('img');
        img.onload = function () {
          if (img.width < 1000 || img.height < 1000)
          {
            alert("upload image should be greater then 1000px*1000px");
            return;
          }
          var oImg = new fabric.Image(img);
          var oImg = oImg.set({left: 50, top: 100, angle: 00}).scaleToWidth(90);
          canvas.add(oImg);
          canvas.setActiveObject(oImg);
        };
        img.src = data;
      };
      reader.readAsDataURL(file);
    });
    document.querySelector('#txt').onclick = function (e) {
      e.preventDefault();
      canvas.deactivateAll();
      oImg.resizeFilter = new fabric.Image.filters.resizeFilter({type:'sliceHack'});
      document.querySelector('#preview').src = canvas.toDataURL({
        format: 'png',
        multiplier: 5});
    }

这行var img = document.createElement('img');基本上是最后定义图像的方式，而我目前仍未正确链接它。我尝试构建类似于指针的C ++函数，因为这是我惯用的方法，但是我只是尝试过函数调用。范围基本上就是我一直在尝试的范围。目前，它也向我发出有关调整纹理大小的警告，我想这是我问这个问题的重点。我需要Canvas.setHeight和setWidth才能将足够大的纹理推送到以var data为幌子进行设置的输出，然后再通过var img进行设置。

我尝试了一种不同的方式来定义渲染传递函数，该函数看起来与仅在return img内使用getTrueImageScope()有所不同，但是我没有成功。

这是我尝试通过渲染函数调用它的方式。

v = getTrueImageScope();

function render(img) {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  canvas.setHeight(812);
  canvas.setWidth(812);
  canvas.renderAll();
  canvas.calcOffset();
  //render(v);
  getTrueImageScope();
  img.minFilter = THREE.LinearFilter;        //Meant to call my texture, which exists within the FabricJS-rendered canvas inside of a new fabric.Image(img). variable which is then set to ThreeJS's minFilter in order to not constrain high quality images. Possibly needs to be called outside of its own scope.
  //return v;
}

function getTrueImageScope() {
  return img;
}

您可以在此处查看完整的工作代码。 https://github.com/kerry-sandhu/WebGL2-Product-Customizer/blob/master/imageUpdate102v2.html

因此，此操作的真正目标是设置在render（）内部存在的调用（这是Three.js函数），以获取存在于新fabric.FabricJS渲染的画布中的调用。 img）变量，然后将其设置为ThreeJS的minFilter以便不限制高质量图像。它存在于模态内部，而该模态我主要在自定义Fabricjs包装器中调用，并被设置为控制图像，然后保存该图像的精确副本和精确空间以保留分辨率。

canvas标签实际上被设置为使图像尽可能地大，而不会在纹理空间内受限制，而不会使Fabricjs窗口在模态内部过大。不过，如果将其调大，即使在其自定义div布局内，它也仍然会影响屏幕空间。请查看完整的Github代码，并将其加载为配置为在本地atm运行的简单页面，对不起，我没有设置实时页面。

https://github.com/kerry-sandhu/WebGL2-Product-Customizer/blob/master/imageUpdate102v2.html

Three.js过滤器应应用于纹理，并允许我使用更高分辨率的纹理。我在想，也许这对于SVG实施来说不太麻烦？请记住，这是利用canvas-to-blob和threejs r102以及OBJLoader实现。

如何在特定范围内正确应用Three.js的线性滤波器？ [Javascript]

0 个答案: