canvas图片合成背景图与二维码合成海报

<!DOCTYPE html>
<html>
 

<head>
<metacharset=”utf-8″>
<metaname=”viewport”content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”/>
<title></title>
<style>
.mui-backdrop{background-color: rgba(255,255,255,0);}
#canvas,#canvas2{position: fixed;left: 0px;top: 0px;z-index: 999;display: none;}
.endImg2{position: fixed;left: 0px;top: 44px;width: 100%;display: block;z-index: 99;display: none;}
</style>
</head>
 

<body>
<headerclass=”mui-bar mui-bar-nav”>
<aclass=”mui-action-back mui-icon mui-icon-left-nav mui-pull-left”></a>
<h1class=”mui-title”></h1>
<ahref=”#slidePopover”class=”mui-icon mui-icon-bars mui-pull-right”></a>
</header>
<divclass=”mui-content”>
<divclass=”yeyu_page_tg”>
<imgsrc=”__HOME__/images/bg66.png”class=”bg”/>
<divclass=”imgup”>
<inputtype=”file”id=”upImg”onchange=”preview(this,’codeImg’)”/>
<imgsrc=”__HOME__/images/default_code.png”id=”codeImg”/>
</div>
<buttontype=”button”onclick=”imgEnd()”>立即生成</button>
<canvasid=”canvas”></canvas>
<canvasid=”canvas2″></canvas>
</div>
<ahref=””download=”img”id=”downImg”><imgsrc=””alt=””class=”endImg2″></a>
</div>
<scripttype=”text/javascript”src=”__HOME__/js/jquery-1.8.3.min.js”></script>
<scripttype=”text/javascript”>
varw=($(window).width()/750)*240;
$(“.imgup”).css({width:w+’px’,height:w+’px’,marginLeft:-w/2+’px’,top:’32%’})
</script>
<script>
functionpreview(file, id) {
varprevDiv = document.getElementById(id);
if (file.files && file.files[0]) {
varreader = newFileReader();
reader.onload = function (evt) {
varc = document.getElementById(“canvas2”);
c.width = 240;
c.height = 240;
varctx = c.getContext(“2d”);
varimg = newImage();
img.src = evt.target.result;
img.onload = function () {
ctx.drawImage(img, 0, 0, 240, 240);
varendImgBase64 = c.toDataURL(‘image/png’,
0.9);
prevDiv.src = endImgBase64
}
 

}
reader.readAsDataURL(file.files[0]);
} else {
returnfalse;
}
}
 

functionimgEnd() {
varupImgValue = document.getElementById(‘upImg’).value;
if (upImgValue == null || upImgValue == ”) {
alert(‘请先选择二维码。’);
returnfalse;
}
varc = document.createElement(“canvas”);
c.width = 750;
c.height = 1205;
varctx = c.getContext(“2d”);
//logo——————–
varimgLogo = newImage();
imgLogo.src = “__HOME__/images/bg66.png”;
imgLogo.onload = function () {
ctx.drawImage(imgLogo, 0, 0);
varimgEq = newImage();
varcodeIMgValue = document.getElementById(‘codeImg’).src;
imgEq.src = codeIMgValue;
imgEq.onload = function () {
ctx.drawImage(imgEq, 254, 388);
varendImgBase64 = c.toDataURL(‘image/png’,
0.9);
$(“.endImg2”).attr(“src”,
endImgBase64).show();
$(‘#downImg’).attr(‘href’, endImgBase64);
setTimeout(function () {
alert(‘生成成功！\n点击下载图片。’)
}, 300)
};
};
};
</script>
</body>
 

</html>