Question

我试图将图像放在一个框架内，我想让图像适应框架的透明区域。

<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var imageURLs=[];  
    imageURLs.push("http://i.imgur.com/LKx3Yel.png");
    imageURLs.push("http://i.imgur.com/cXOrsmT.jpg");

    var imgs=[];
    var imagesOK=0;
    loadAllImages(start);

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback();
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i];
        }      
    }

    function start(){


        ctx.drawImage(imgs[0],0,0);
        ctx.globalCompositeOperation='destination-over';
        ctx.drawImage(imgs[1],0,0);

    }

}); 
</script>
</head>
<body>
    <canvas id="canvas" width=884 height=1171></canvas>
</body>
</html>

但有两个问题：

图片位于框架边框
图像不够大（我猜是因为应该裁剪和拉伸？）

我知道我可以通过坐标来指定图像的位置，但问题是用户可以选择不同类型的帧，因此最好的解决方案是＆＃34;替换＆＃34;带图像的透明区域。

P.S。我尝试使用canvas，但欢迎使用其他解决方案

html5画布里面的透明图像

0 个答案: