Question

我真的很感激我能得到的任何帮助。我现在已经好几个小时了。我正在尝试使用webApp功能，人们可以自拍，然后将图像放在上面并将其发送到电子邮件。直到现在我有了这个：

<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层制作的自拍，然后保存图像，这样我就可以将它发送给php邮件程序。

如何在Blob：http图像上合并由Konva创建的画布，以便可以通过电子邮件发送它

1 个答案: