Javascript trasparent内部的html5画布图像_Javascript_Css_Html_Canvas

Javascript trasparent内部的html5画布图像

javascript css html canvas

Javascript trasparent内部的html5画布图像,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我试图把一个图像放在一个框架内，我想在框架的透光区域上调整图像我试着这样做：正文{背景色：象牙；} 画布{边框：1px纯红；} $（函数（）{ var canvas=document.getElementById（“canvas”）； var ctx=canvas.getContext（“2d”）； var-imageurl=[]； imageURLs.push（“http://i.imgur.com/LKx3Yel.png"); imageURLs.push（“http://i.img

我试图把一个图像放在一个框架内，我想在框架的透光区域上调整图像

我试着这样做：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-imageurl=[]；
imageURLs.push（“http://i.imgur.com/LKx3Yel.png");
imageURLs.push（“http://i.imgur.com/cXOrsmT.jpg");
var-imgs=[]；
var-imagesOK=0；
加载图像（开始）；
函数LoadAllImage（回调）{
for（var i=0；i=imageURL.length）{
回调（）；
}
};
img.onerror=function（）{alert（“映像加载失败”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}      
}
函数start（）{
ctx.drawImage（imgs[0]，0,0）；
ctx.globalCompositeOperation='destination-over'；
ctx.drawImage（imgs[1]，0,0）；
}
});

但有两个问题：

图像位于边框下方

图像不够大（我想是因为应该裁剪和拉伸？）

我知道我可以通过坐标指定图像的位置，但问题是用户可以选择不同类型的帧，因此最好的解决方案是用图像“替换”透射区域

另外，我正在尝试canvas，但欢迎使用其他解决方案

这就是您想要的吗？它延伸到内部图像大小。fiddle不工作，我已经修复了它（）问题是它应该用于移动设备，所以需要响应。。。这就是我尝试使用Canvasy的原因抱歉忘了保存这里有一个具有响应图像的更新：

<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>