0

我非常感谢我能得到的任何帮助。我现在已经兴奋了好几个小时了。我正在尝试做一个 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拖到图像上。但是如何将组合保存到一张图像中？

4

1 回答 1

0

如果不清楚，我很抱歉。我正在移动设备上拍照。然后使用此功能将其保存在网站上：

  <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 mailer 左右发送它。

于 2017-04-16T10:40:18.170 回答