###利用canvas做一个插入图片,导出海报图片的工具###
有张背景的海报图,当用户上传图片,图片在背景图的空白部分展示,并且点击可以生成显示的效果图片,利用canvas是很容易实现的
canvas的toDataURL()方法可以把canvas转化为base64的图片
直接来看看代码吧:
<style>
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.b {
position: absolute;
bottom: 20px;
left: 150px;
background-color: #00ffff;
color: #ffffff;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}
.zz {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;
background-color: rgba(0, 0, 0, .8);
padding: 20px;
}
</style>
<div class="box">
<canvas id="cvs"></canvas>
<div class="b">生成图片</div>
</div>
<div class="z">
</div>
<script>
/*
获取canvas节点,并且设置canvas的宽高为屏幕宽高
*/
var canvas = document.getElementById("cvs");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.onresize = function (e) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
/*
设置在画布上的绘制环境
*/
var ctx = canvas.getContext("2d");
bgWrite();
writeImg("sc.png");
/*
海报背景图片的绘制
*/
function bgWrite(callback) {
var imgObj = new Image();
imgObj.src = "bg5.jpg";
imgObj.onload = function () {
ctx.drawImage(imgObj, 0, 0, window.innerWidth, window.innerHeight);
typeof callback == "function" && callback();
}
}
/*
传入要插入的图片地址,完成绘制
*/
function writeImg(src) {
bgWrite(function () {
var myImg = new Image();
myImg.src = src;
myImg.onload = function () {
/*
绘制后面插入的图片,宽高位置根据背景图位置决定
注意:安卓下是等比例,但是在ios下需要2倍
*/
if(navigator.userAgent.indexOf("iPhone")> -1) {
ctx.drawImage(myImg, 200, 400, 400, 400);
}
ctx.drawImage(myImg, 100, 200, 200, 200);
/*
img绘制完成,给点击事件,即点击导出图片到另一个div
*/
$(".b").on("click", function () {
console.log("sdfjktj")
var image = sheng(canvas);
$(".z").addClass("zz").append($("<img>").attr("src", image));
})
}
})
}
/*
传入要绘制图片的canvas节点,返回base64
*/
function sheng(node) {
var image = node.toDataURL("image/png");
return image;
}
</script>
简单的效果实现了,如果要实现点击上传图片,只要自己写一个上传图片的input标签,然后透明定位在放上传图片的位置,上传成功调用绘制的方法就行了