摘要:JavaScript - 圖片合成、堆疊
遇到需要，將兩張圖做疊合，製造出不同的組合效果，有點像貼圖的功能。
在網路上找相關文章，
可以使用canvas的方式，
或則舊有的使用css設top、left、z-index做圖層堆疊。
第一種canvas如下
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
#divContext {
position:absolute;
left:100px;
top:100px;
}
</style>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
window.onload = function(images) {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sources = {
darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
yoda: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"
};
loadImages(sources, function(images) {
context.drawImage(images.darthVader, 100, 30, 200, 137);
context.drawImage(images.yoda, 250, 55, 93, 104);
});
};
</script>
</head>
<body>
<div id="divContext">
<canvas id="myCanvas" width="578" height="200"></canvas>
</div>
</body>
</html>
第二種圖層堆疊如下
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#divContext {
border: 1px solid #9C9898;
left:100px;
top:100px;
position:absolute;
width:578px;
height:200px;
}
</style>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src].src;
images[src].style.left = sources[src].left ;
images[src].style.top = sources[src].top ;
images[src].style.width = sources[src].width ;
images[src].style.height = sources[src].height ;
images[src].style.position = 'absolute';
images[src].style.zIndex = sources[src].zIndex ;
}
}
window.onload = function(images) {
var image_data = {
darthVarder:{src:"http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",left:"100px",top:"30px",width:"200px",height:"137px",zIndex:1},
yoda:{src:"http://www.html5canvastutorials.com/demos/assets/yoda.jpg",left:"250px",top:"55px",width:"93px",height:"104px",zIndex:2}
};
loadImages(image_data, function(images) {
var div = document.getElementById('divContext');
for(var key in images)
{
div.appendChild(images[key]);
}
});
};
</script>
</head>
<body>
<div id="divContext">
</div>
</body>
</html>