Canvas中重疊的圖像

我使用畫布標籤來顯示用戶上傳的圖像。要更改圖像，用戶必須上傳另一個圖像文件，因此畫布中的舊圖像會被新圖像替換。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>

角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 
    });

輸出uplaoding一個新的形象，當我得到..

正如你在上面看到的，蝙蝠圖像被繪製在椅子圖像的頂部，而不是上傳它。我無法在上傳時在畫布標籤中替換舊圖像。請幫助

來源

2016-07-15 Lucy

希望它會有所幫助。嘗試，

style="position:fixed;"

來源

2016-07-15 08:12:37 Pirate

Canvas中重疊的圖像

回答

相關問題