Konva에서 만든 캔버스를 blob : http 이미지에 병합하여 이메일로 보낼 수있는 방법

Question

나는 이걸 가지고 얻을 수있는 도움에 정말 감사 할 것입니다. 나는 지금 몇 시간 동안 집중한다. 사람들이 셀카를 가지고 웹 페이지에 이미지를 올려 전자 메일로 보낼 수있는 webApp Function을하려고합니다.

<img id="frame"> 
<script type="text/javascript"> 
    var camera = document.getElementById('camera'); 
    var frame = document.getElementById('frame'); 
    camera.addEventListener('change', function(e) { 
     var file = e.target.files[0]; 
     // Do something with the image file. 
     frame.src = URL.createObjectURL(file); 
     alert(frame.src); 
    }); 
</script> 
<div id="container"></div> 
<script type="text/javascript"> 
    var width = window.innerWidth; 
    var height = window.innerHeight; 

    function drawImage(imageObj) { 
     var stage = new Konva.Stage({ 
      container: 'container', 
      width: 800, 
      height: 400, 
     }); 
     var layer = new Konva.Layer(); 
     // darth vader 
     var darthVaderImg = new Konva.Image({ 
      image: imageObj, 
      x: stage.getWidth()/2 - 200/2, 
      y: stage.getHeight()/2 - 137/2, 
      width: 200, 
      height: 137, 
      draggable: true 
     }); 
     // add cursor styling 
     darthVaderImg.on('mouseover', function() { 
      document.body.style.cursor = 'pointer'; 
     }); 
     darthVaderImg.on('mouseout', function() { 
      document.body.style.cursor = 'default'; 
     }); 
     layer.add(darthVaderImg); 
     stage.add(layer); 
    } 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
     drawImage(this); 
    }; 
    imageObj.src = 'kochmuetze.png'; 
</script> 

그것은 사진을 촬영하고 난 이미지에 kochmuetze.png을 드래그 할 수 있습니다 : 은 지금까지 나는이 있습니다. 그러나 하나의 이미지에이 조합을 저장하는 방법은 무엇입니까?

Answer 1

불명확하면 죄송합니다. 휴대 기기에서 사진을 찍고 있습니다. 그리고이 기능을 사이트에 저장 :

<img id="frame"> 
<script type="text/javascript"> 
    var camera = document.getElementById('camera'); 
    var frame = document.getElementById('frame'); 
    camera.addEventListener('change', function(e) { 
     var file = e.target.files[0]; 
     // Do something with the image file. 
     frame.src = URL.createObjectURL(file); 
     alert(frame.src); 
    }); 
</script> 

을 그리고, 나는 그 사진 (셀카)의 상단에 다른 이미지의 위치를 ​​사용자 수 있도록 Konva를 사용하고 다른 해결책을 찾을 수 없습니다 때문입니다. 나는이 함수로 이것을한다 :

<div id="container"></div> 
<script type="text/javascript"> 
    var width = window.innerWidth; 
    var height = window.innerHeight; 

    function drawImage(imageObj) { 
     var stage = new Konva.Stage({ 
      container: 'container', 
      width: 800, 
      height: 400, 
     }); 
     var layer = new Konva.Layer(); 
     // darth vader 
     var darthVaderImg = new Konva.Image({ 
      image: imageObj, 
      x: stage.getWidth()/2 - 200/2, 
      y: stage.getHeight()/2 - 137/2, 
      width: 200, 
      height: 137, 
      draggable: true 
     }); 
     // add cursor styling 
     darthVaderImg.on('mouseover', function() { 
      document.body.style.cursor = 'pointer'; 
     }); 
     darthVaderImg.on('mouseout', function() { 
      document.body.style.cursor = 'default'; 
     }); 
     layer.add(darthVaderImg); 
     stage.add(layer); 
    } 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
     drawImage(this); 
    }; 
    imageObj.src = 'kochmuetze.png'; 
</script> 

그리고 지금 나는 무엇을하고 싶다. 사용자가 전자 메일을 통해 전체 이미지 컴포지션을 보낼 수있게하는 클릭 이벤트에 대한 함수를 만듭니다. 따라서 사용자가 konva 레이어를 통해 만든 selfie를 병합 한 다음 이미지를 저장해야 php 메일러 등을 보낼 수 있습니다.