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

【问题标题】：How to merge a canvas created by Konva on a blob:http image so it can be sent in an email如何在 blob:http 图像上合并由 Konva 创建的画布，以便可以通过电子邮件发送
【发布时间】：2017-09-11 13:23:27
【问题描述】：

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

【问题讨论】：

对我来说这个问题还不清楚。您可以使用 stage.toDataURL() 将其转换为 base64 图像。
如果问题不清楚，我很抱歉让我解释一下。

标签： web-applications html5-canvas blob konvajs

【解决方案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 mailer 左右发送它。

【讨论】：