Question

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

我能够在普通的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
     });

输出我在上传新图片时获得..

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

Answer 1

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

 style="position:fixed;"

图像在Canvas中重叠

1 个答案: