图像在画布中重叠答案

【问题标题】：Images getting overlapped in Canvas图像在画布中重叠
【发布时间】：2016-11-18 08:35:56
【问题描述】：

我正在使用画布标签来显示用户上传的图像。要更改图像，用户只需上传另一个图像文件，因此画布中的旧图像会被新图像替换。

我可以在普通的 Javascript 中做到这一点，但是当我在 Angular 中尝试同样的事情时，我遇到了问题。新图像不会替换旧图像，而是显示在旧图像之上。

HTML 代码..

  <html lang="en" ng-app="myApp">
  <script src="js/exif.js"></script>
   <div class="form-group">
                    <label for="item_image" id="image_label" class="col-sm-2 control-label">Add Id Proof</label>
                    <div class="col-sm-10">
                        <input type="file" class="form-control" id="ifile" ng-model="ifile">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <canvas id="panel" ng-model="panel" width="300" height="300" style=" display: table;margin: 0 25%;margin-bottom:10px;"></canvas>
                    </div>
                </div>

Angular Js 代码..

      var app = angular.module('myApp', []);
     app.controller('myCtrl', function($scope) {

     //beginning of image display
var canvasCtx = document.getElementById("panel").getContext("2d");

$('#ifile').change(function(event) {
    EXIF.getData(event.target.files[0], function() {
    exif = EXIF.getAllTags(this);

    picOrientation = exif.Orientation;
    });

    this.imageFile = event.target.files[0];

    var reader = new FileReader();
    reader.onload =  function(event) {
        var img = new Image();
        img.onload = function() {
            drawImage(img);
        }
        img.src = event.target.result;

    }
    reader.readAsDataURL(this.imageFile);
});

var drawImage = function(img) {
    canvasCtx.width = 300;
    canvasCtx.height = 300;

    if(img.width>img.height){                                               //Landscape Image 
        canvasCtx.width = 300;
        canvasCtx.height = 300 / img.width * img.height;
    } else {                                                                  //Portrait Image
        canvasCtx.width = 300 / img.height * img.width;
        canvasCtx.height = 300;
    } 

    if (picOrientation==2){
        canvasCtx.transform(-1, 0, 0, 1,canvasCtx.width, 0);
    }
    if (picOrientation==3){
        canvasCtx.transform(-1, 0, 0, -1,canvasCtx.width, canvasCtx.height);
    }
    if (picOrientation==4){
        canvasCtx.transform(1, 0, 0, -1, 0, canvasCtx.height );
    }
    if (picOrientation==5){
        canvasCtx.transform(0, 1, 1, 0, 0, 0);
    }
    if (picOrientation==6){
        canvasCtx.transform(0, 1, -1, 0, canvasCtx.height , 0);
    }
    if (picOrientation==7){
        canvasCtx.transform(0, -1, -1, 0, canvasCtx.height , canvasCtx.width);
    }
    if (picOrientation==8){
        canvasCtx.transform(0, -1, 1, 0, 0, canvasCtx.width);
    }

    canvasCtx.drawImage(img,0,0,canvasCtx.width, canvasCtx.height);
    image_url = canvasCtx.canvas.toDataURL();
}           
//end of image display
     });

上传新图片时得到的输出..

正如您在上面看到的那样，蝙蝠图像被绘制在椅子图像的顶部而不是上传它。上传时我无法让新图像替换画布标签中的旧图像。请帮助

【问题讨论】：

标签： javascript angularjs html canvas

【解决方案1】：

希望它会有所帮助。试试吧，

 style="position:fixed;"

【讨论】：