畫布層（Z索引）

我知道Canvas是墨乾的，每個繪製的東西都在上面。我有一個小問題畫布層（Z索引）

，我有背景圖像

   var sources = { 
        bg: 'images/room-1/bg.png', 
        rightWall: 'images/room-1/wall-right.png', 
        leftWall: 'images/room-1/wall-left.png', 
        beam: 'images/room-1/beam-left.png', 
        sofa: 'images/room-1/sofa.png' 
       }; 

       loadImages(sources, function(images) { 
        context.drawImage(images.bg, 0, 0, 760, 500); 
        context.drawImage(images.rightWall, 714, 0, 46, 392); 
        context.drawImage(images.leftWall, 0, 160, 194,322); 
        context.drawImage(images.beam, 0, 45, 143,110); 
        context.drawImage(images.sofa, 194, 280, 436,140); 
       });

這無關緊要，他們爲了我怎麼樣源列表。

我的問題是我有一個圖像上傳爲用戶上傳他們的圖像到畫布。

我只是使用上傳框來測試理論，但想法是用戶將上傳他們的圖像，裁剪，縮放它，使用JQuery/PHP並保存圖像。然後我會抓住這個操縱的URL並將其拉入，但是問題在於Canvas被加載，所以當我上傳圖像時，它會從源圖像上移開。

我不想使用多個Canvas，因爲我需要將此畫布作爲整體保存爲圖像。

  var imageLoader = document.getElementById('imageLoader'); 
       imageLoader.addEventListener('change', handleImage, false); 

       function handleImage(e){ 
        var reader = new FileReader(); 
        reader.onload = function(event){ 

         var img = new Image(); 
         img.onload = function(){ 
          canvas.width = 760; 
          canvas.height = 300; 
         } 
         img.src = event.target.result; 
         img.onload = function(){ 
          context.drawImage(img, 0, 0); 
         }; 
        } 
        reader.readAsDataURL(e.target.files[0]);  
       }

來源

2013-06-21 Cameron Owen

畫布沒有圖層。

但是，您仍然可以獲得1個最終圖像，包括背景和用戶的縮放/旋轉前景。由於你想讓用戶旋轉/縮放他們的圖像，但你不想影響背景，你需要2個畫布 - 一個背景畫布和一個用戶畫布。

// HTML 

<div id="container"> 
    <canvas id="background" class="subcanvs" width=760 height=300></canvas> 
    <canvas id="canvas" class="subcanvs" width=760 height=300></canvas> 
</div> 

// CSS 

#container{ 
    position:relative; 
    border:1px solid blue; 
    width:760px; 
    height:300px; 
} 
.subcanvs{ 
    position:absolute; 
} 


// JavaScript 

// a background canvas 
var background=document.getElementById("background"); 
var bkCtx=background.getContext("2d"); 

// a foreground canvas the user can rotate/scale 
var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d");

然後當用戶完成旋轉/縮放時，將用戶畫布drawImage到背景畫布。

// combine the users finished canvas with the background canvas 
bkCtx.drawImage(canvas,0,0); 

// and save the background canvas (now it's combined) as an image 
var imageURL=background.toDataURL();

來源

2013-06-21 13:13:25 markE

畫布層（Z索引）

回答

相關問題