0

キャンバスはインクが乾くにつれて、描画された各アイテムが上にあることを理解しています。

少し問題があります。背景画像のソースのリストがあります

                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 が読み込まれているため、画像をアップロードするとソース画像の上に表示されることです。

このキャンバスを画像全体として保存する必要があるため、複数のキャンバスを使用したくありません。

            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]);     
                }
4

1 に答える 1

0

キャンバスにはレイヤーがありません。

ただし、背景とユーザーのスケーリング/回転された前景の両方で 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-21T13:13:25.667 に答える