Question

我正在建立一个网站，用户可以在其中将一个图片上传到另一个图片上。我已经取得了一些成功，但是剩下一个简单的错误，我无法纠正。当用户上载图像时，作为基础图像的现有图像将被替换，并且只有上载的图像显示在“画布”中。我已经尝试过CSS技巧，它起作用了，但是我想通过javascript实现它。

我已经实现了上传图像，并且自从遇到上述错误以来，一切都变得很完美。

这是HTML部分：

  <div id="container">
    <input type="file" id="imageLoader" name="imageLoader" />
    <canvas class="imageCanvas"id="imageCanvas" width="520" height="370"></canvas>
    <input class="inp" value="Enter Your Name" maxlength="12" type="text" id="inp"/>
    <a id="imageSaver" href="#">Save image</a>

这是javascript部分：


var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
    // var canvas = document.getElementById("imageCanvas").style.background = "url('img.jpg')";
    var canvas = document.getElementById("imageCanvas");
    var ctx = canvas.getContext("2d");

    make_base();

    function make_base()
    {
      base_image = new Image();
      base_image.src = 'img.jpg';
      base_image.onload = function(){
        ctx.drawImage(base_image, 0, 0);
      }
    }

var img = new Image();
function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        img.onload = function(){
            canvas.width = 520;
            canvas.height = 370;
            //drawImage(imgObj, 0, 0, imgObj.width * 0.3, imgObj.height * 0.3)
            ctx.drawImage(img,0,0, 200, 200);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

我也尝试过此CSS技巧，但就我而言，每篇文章都有一个单独的图像，因此这不符合我的目的：

.imageCanvas{

   background-image:    url(img.jpg); 
}

我想通过base_image上传图像，但是当我上传图像时，base_image被替换为上传图像，并且只有上传图像显示在画布中。 JSFIDDLE链接为https://jsfiddle.net/manigr8est/3woj8xfc/3/

在画布html5中上传图片会替换背景图片

0 个答案: