어떻게 직물 JS 핸들러

setTimeout(function() { 
 
     var myImg = document.querySelector("#background"); 
 
     var realWidth = myImg.naturalWidth; 
 
     var realHeight = myImg.naturalHeight; 
 
     $("canvas").attr("width", realWidth); 
 
     $("canvas").attr("height", realHeight); 
 
     var source = document.getElementById('background').src; 
 
     var canvas = new fabric.Canvas('canvas'); 
 
     canvas.width = realWidth; 
 
     canvas.height = realHeight; 
 
     var ctx = canvas.getContext('2d'); 
 
     
 
     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; 
 
       fabric.Image.fromURL(data, function (img) { 
 
        
 
        var oImg = img.set({ 
 
         left: 320 
 
         , top: 180 
 
         , angle: 00 
 
         , width: 200 
 
         , height: 200 
 
        }); 
 
        canvas.add(oImg).renderAll(); 
 
        var a = canvas.setActiveObject(oImg); 
 
        var dataURL = canvas.toDataURL({ 
 
         format: 'png' 
 
         , quality: 0.8 
 
        }); 
 
       }); 
 
      }; 
 
      reader.readAsDataURL(file); 
 
     }); 
 
     canvas.setOverlayImage(source, canvas.renderAll.bind(canvas), { 
 
      backgroundImageOpacity: 0.5 
 
      , backgroundImageStretch: false 
 
     }); 
 
     canvas.on('mouse:over', function (e) { 
 
      canvas.item(0).hasBorders = true; 
 
      canvas.item(0).hasControls = true; 
 
      canvas.setActiveObject(canvas.item(0)); 
 
     }); 
 
     canvas.on('mouse:out', function (e) { 
 
      canvas.item(0).hasBorders = false; 
 
      canvas.item(0).hasControls = false; 
 
      canvas.setActiveObject(canvas.item(0)); 
 
     }); 
 
     canvas.renderAll(); 
 
    }, 2000); 
 
    $("#save").click(function() { 
 
     function blobCallback(iconName) { 
 
      return function (b) { 
 
       var a = document.getElementById('download'); 
 
       a.download = iconName + ".jpg"; 
 
       a.href = window.URL.createObjectURL(b); 
 
      } 
 
     } 
 
     canvas.toBlob(blobCallback('wallpaper'), 'image/vnd.microsoft.jpg', '-moz-parse-options:format=bmp;bpp=32'); 
 
    });

.hide { 
 
      display: none; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cricmovie.com/bb-asserts/js/fabric.min.js"></script> 
 
<body> 
 
    <div class="container"> <img src="http://cricmovie.com/bb-asserts/images/person.png" id="background" class="hide"> 
 
     <input type="file" id="file"> 
 
     <br /> 
 
     <canvas id="canvas" class="img-responsive"></canvas> 
 
    </div> 
 
    <div class="container"> <a class="btn btn-primary" id="save">Save</a> <a class="btn btn-primary" id="download">Download</a> </div> 
 
</body>

내가 setOverlayImage를 사용하여 캔버스에 적용되는 얼굴없이 두 이미지 1) 이미지가있을 때 안면 응용 프로그램을 구축하는 직물의 js를 사용하고

을위한 Z- 인덱스를 적용 method 2) 사용자가 업로드하고 조정할 부분 만 헤드 조정하십시오.

나는 거의 기능을 수행했지만 첫 번째 이미지 위에 패브릭 핸들러를 표시하여 첫 이미지 뒤에 숨어있는 위치를 표시하려고합니다.

참조 이미지 : Click here for reference Image

내가 당신이해야 할 모든 생각 실행 코드 조각

출처

2016-09-01 Bikshu s

여기 코드 예제 또는 jsfiddle에서 코드를 실행하여 디버깅하기가 쉽습니다. 또한 fabricjs 핸들이 기본적으로 맨 위에 표시되기 때문에 혼란 스럽습니다. – StefanHayden

답장을 보내 주셔서 감사합니다. 코드 예제에서 실행중인 코드를 첨부했습니다. 찾으십시오. –

을 찾아주세요은 직물 인스턴스를 얻을 때 controlsAboveOverlay를 지정합니다.

var canvas = new fabric.Canvas('canvas', { 
     controlsAboveOverlay : true 
    });

출처

2016-09-02 13:30:22 StefanHayden

감사합니다. –

어떻게 직물 JS 핸들러

답변

관련 문제