浏览和选择文件时更改 img src答案

【问题标题】：Change img src when browse and select file浏览和选择文件时更改 img src
【发布时间】：2016-06-03 17:54:39
【问题描述】：

我正在尝试捕获 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>

【问题讨论】：

标签： javascript jquery html image src

【解决方案1】：

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

【讨论】：