Question

我正在尝试捕获div内容并将其另存为图像。 div内容包含图像上的图像。基本图像将保持不变，当用户浏览并选择图像文件时，它将显示在基本图像上。现在，当用户按下按钮时，我正在捕获该div内容。

问题是第一次，当默认图像在基本图像上时，按下提交按钮，它将捕获两个图像并将其转换为新图像。

在此之后，当用户浏览并选择新图像时，它将显示在基本图像上，但是当按下按钮时，它将生成仅基本图像的新图像，并且用户选择的图像不会出现在捕获的图像上。

<script>
    $(function() { 
        $("#proceed").click(function() { 
            html2canvas($("#wrap"), {
                onrendered: function(canvas) {
                    theCanvas = canvas;
                    document.body.appendChild(canvas);
                    window.open(canvas.toDataURL('image/jpeg'));
                }
            });
        });
    }); 

    //display user uploaded image
    var loadFile = function(event) {
        var output = document.getElementById('output');
        output.src = URL.createObjectURL(event.target.files[0]);
    };
</script>

<input type="file" onchange="loadFile(event)">
<input type="button" value="Capture" id="proceed"/>

<div id="wrap">
    <img src="1.png"> //base image
    <div id="draggable">
        <img id="output" src="admin/images/allproduct/no_image.png" /> //user selected image
    </div>
</div>

Answer 1

我和你使用AngualrJS完成了同样的任务。该框架具有一些高级功能，如指令和过滤器。 https://docs.angularjs.org/api/ng/directive/ngSrc 您可以非常轻松地管理DOM和所有内容。请检查一下。

浏览时更改img src并选择文件

1 个答案: