<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas制作海报</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.poster{
position: relative;
opacity: 0;
}
.post_word{
width: auto;
height: 14vh;
position: absolute;
bottom: 11%;
left: 3%;
}
.post_img{
width: 100%;
height: auto;
display: block;
}
.poster .post_title {
width: 90%;
height: auto;
background: rgba(255,255,255,0.5);
padding: 2.4vw;
border-radius: 6px;
position: absolute;
top: 3%;
left: 5%;
display: flex;
}
.poster .post_headimg{
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.poster .post_middle{
flex: 1;
margin-left: 3vw;
}
.poster .post_middle p:first-child{
font-size: 22px;
font-weight: bold;
}
.poster .post_middle p:last-child{
font-size: 13px;
}
.poster .post_right{
color: #fff;
background: rgba(151,179,193,0.6);
text-align: right;
height: 80%;
padding: 1vw;
}
.poster .post_right p:first-child{
font-size: 14px;
}
.poster .post_right p:last-child{
font-size: 12px;
}
.poster .post_motto{
width: 58vw;
color: #fff;
font-size: 13px;
position: absolute;
left: 2%;
bottom: 2%;
}
.poster .post_ma{
background-color: #fff;
position: absolute;
right: 1%;
bottom: 2%;
padding: 1vw;
}
.poster .post_ma img{
width: 35vw;
height: auto;
display: block;
}
.mask,.imgs{
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.6);
position: fixed;
left: 0;
top: 0;
position: absolute;
left: 0;
top: 0;
}
#post{
width: 100%;
}
.imgs{
z-index: 9999;
}
.imgs img{
width: 100%;
display:block;
}
</style>
</head>
<body>
<div class="poster" style="">
<img src="https://qiniu.sxvt58.com/sxcard/1555403795808.jpg" crossorigin="Anonymous" alt="" class="post_img" data-id="78a92d782dfbf98ae0377e57e97a62b7">
<img src="https://qiniu.sxvt58.com/sxcard/1554278081653.png" crossorigin="Anonymous" alt="" class="post_word" data-id="7cf0b49a9be03feb9e2dec470df256fc">
<div class="post_title">
<img src="https://qiniu.sxvt58.com/me/1553321223000-o_1d6kihp1igt8hqu249m8c8st2f.jpg" crossorigin="Anonymous" alt="头像" class="post_headimg">
<div class="post_middle">
<p>07:15</p>
<p><span>174</span>人参加</p>
</div>
<div class="post_right">
<p>坚持<span>18</span>天</p>
<p>2019-04-24</p>
</div>
</div>
<div class="post_motto">学习这件事，不是缺乏时间，而是缺乏努力。</div>
<div class="post_ma">
<img class="post_ma_img" src="https://qiniu.sxvt58.com/card/1554793852482.jpg" crossorigin="Anonymous" alt="三维码">
</div>
</div>
<div class="mask">
<canvas id="post" width="375" height="667"></canvas>
</div>
<div class="imgs">
<img src="" alt="">
</div>
<script src="../../Public/js/jquery-2.1.4.js"></script>
<script>
function draw(){
var canvas = document.getElementById('post');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
// 绘制背景图
var img1 = document.querySelector(".post_img");
var w1 = $(".post_img").width()*2;
var h1 = $(".post_img").height()*2;
canvas.width = w1;
canvas.height = h1;
ctx.drawImage(img1, 0, 0,w1,h1);
//绘制早安文字 top-y,left-x
var t2 = $(".post_word").position().top*2,
l2 = $(".post_word").position().left*2,
w2 = $(".post_word").width()*2,
h2 = $(".post_word").height()*2;
// console.log(t2,l2);
var img2 = document.querySelector(".post_word");
ctx.drawImage(img2,l2,t2,w2,h2);
// 绘制三维码底部背景
var t3_bg = $(".post_ma").position().top*2,
l3_bg = $(".post_ma").position().left*2,
w3_bg = $(".post_ma").outerWidth()*2,
h3_bg = $(".post_ma").outerHeight()*2;
ctx.fillStyle="#fff";
ctx.fillRect(l3_bg,t3_bg,w3_bg,h3_bg);
var t3 = $(".post_ma img").position().top*2 + $(".post_ma").position().top*2,
l3 = $(".post_ma img").position().left*2 + $(".post_ma").position().left*2,
w3 = $(".post_ma img").width()*2,
h3 = $(".post_ma img").height()*2;
var img3 = document.querySelector(".post_ma_img");
ctx.drawImage(img3,l3,t3,w3,h3);
//绘制并填充一个圆角矩形——顶部矩形
var t7 = $(".post_title").position().top*2,
l7 = $(".post_title").position().left*2,
w7 = $(".post_title").outerWidth()*2,
h7 = $(".post_title").outerHeight()*2;
fillRoundRect(ctx,l7,t7,w7,h7,8,'rgba(255,255,255,0.5)');
// 文字
var t5 = $(".post_title").position().top*2 + $(".post_middle").position().top*2,
l5 = $(".post_title").position().top*2 + $(".post_middle").position().left*2,
t5_1 = t5+52,
l5_1 = l5+30,
t5_2 = t5+100,
l5_2 = l5+30;
ctx.fillStyle="#000";
ctx.font = 'normal bold 40px sans-serif';
ctx.fillText('07:15',l5_1,t5_1);
ctx.font = '28px normal normal';
ctx.fillText('174人参加',l5_2,t5_2);
// 绘制矩形——右侧小
var t6 = $(".post_right").position().top*2 + $(".post_title").position().top*2,
l6 = $(".post_right").position().left*2 + $(".post_title").position().left*2,
w6 = $(".post_right").outerWidth()*2,
h6 = $(".post_right").outerHeight()*2;
l6_1 = l6+20;
t6_1 = t6+40;
l6_2 = l6+8;
t6_2 = t6+72;
ctx.fillStyle="rgba(151,179,193,0.6)";
ctx.fillRect(l6,t6,w6,h6);
ctx.fillStyle="#fff";
ctx.font = '28px sans-seri';
ctx.fillText('坚持18天',l6_1,t6_1);
ctx.font = '24px sans-seri';
ctx.fillText('2019-04-24',l6_2,t6_2);
//生成圆框头像
var t4 = $(".post_headimg").position().top*2 + $(".post_title").position().top*2,
l4 = $(".post_headimg").position().left*2 + $(".post_title").position().left*2,
w4 = $(".post_headimg").width(),
h4 = $(".post_headimg").height();
var img4 = new Image();
img4.src = document.querySelector(".post_headimg").src;
// console.log(img4.src);
var img4 = document.querySelector(".post_headimg");
circleImg(ctx,img4,l4,t4,w4);
//熬心灵鸡汤
var t8 = $(".post_motto").position().top*2 ,
l8 = $(".post_motto").position().left*2 ,
w8 = $(".post_motto").outerWidth()*2,
h8 = $(".post_motto").outerHeight()*2,
h8_html = $(".post_motto").html(),
l8_1 = l8+6,
t8_1 = t8+14;
ctx.fillStyle="rgba(0,0,0,0)";
ctx.fillRect(l8,t8,w8,h8);
ctx.fillStyle="#fff";
ctx.font = '28px sans-seri';
writeTextOnCanvas(ctx,36,30,h8_html,l8_1,t8_1);
base64 = canvas.toDataURL("image/png");
console.log(base64);
$(".imgs img").attr("src",base64);
}
document.querySelector(".poster").onclick = function() {
draw();
// $(".mask").fadeIn();
};
window.οnlοad=function(){
draw();
}
// document.querySelector("#post").οnclick=function(){
// var canvas = document.getElementById('post');
// var ctx = canvas.getContext("2d");
// var mew_image = new Image(),//创建新的图片对象
// base64 = '' ;//base64
// mew_image.src ='https://qiniu.sxvt58.com/sxcard/1555403019202.jpg';
// $(".imgs").prepend(mew_image);
// mew_image.setAttribute("crossOrigin",'Anonymous')
// mew_image.onload = function(){//图片加载完，再draw 和 toDataURL
// ctx.drawImage(mew_image,0,0);
// base64 = canvas.toDataURL("image/png");
// console.log(base64)
// }
// }
// 生成填充圆角矩形
function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
//圆的直径必然要小于矩形的宽高
if (2 * radius > width || 2 * radius > height) { return false; }
cxt.save();
cxt.translate(x, y);
//绘制圆角矩形的各个边
drawRoundRectPath(cxt, width, height, radius);
cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值
cxt.fill();
cxt.restore();
// cxt.stroke();
}
function drawRoundRectPath(cxt, width, height, radius) {
cxt.beginPath(0);
//从右下角顺时针绘制，弧度从0到1/2PI
cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
//矩形下边线
cxt.lineTo(radius, height);
//左下角圆弧，弧度从1/2PI到PI
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
//矩形左边线
cxt.lineTo(0, radius);
//左上角圆弧，弧度从PI到3/2PI
cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
//上边线
cxt.lineTo(width - radius, 0);
//右上角圆弧
cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
//右边线
cxt.lineTo(width, height - radius);
cxt.closePath();
// cxt.stroke();
}
//生成圆框头像
function circleImg(ctx, img, x, y, r) {
ctx.beginPath();
ctx.save();
var d =2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
}
// 文字换行
//ctx_2d getContext("2d") 对象
//lineheight 段落文本行高
//bytelength 设置单字节文字一行内的数量
//text 写入画面的段落文本
//startleft 开始绘制文本的 x 坐标位置（相对于画布）
//starttop 开始绘制文本的 y 坐标位置（相对于画布）
function writeTextOnCanvas(ctx, lineheight, bytelength, text ,startleft, starttop){
function getTrueLength(str){//获取字符串的真实长度（字节长度）
var len = str.length, truelen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
truelen += 2;
}else{
truelen += 1;
}
}
return truelen;
}
function cutString(str, leng){//按字节长度截取字符串，返回substr截取位置
var len = str.length, tlen = len, nlen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
if(nlen + 2 < leng){
nlen += 2;
}else{
tlen = x;
break;
}
}else{
if(nlen + 1 < leng){
nlen += 1;
}else{
tlen = x;
break;
}
}
}
return tlen;
}
for(var i = 1; getTrueLength(text) > 0; i++){
var tl = cutString(text, bytelength);
ctx.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
text = text.substr(tl);
}
}
//从 canvas 提取图片 image
// function convertCanvasToImage(canvas) {
// //新Image对象，可以理解为DOM
// var image = new Image();
// // canvas.toDataURL 返回的是一串Base64编码的URL
// // 指定格式 PNG
// image.src = canvas.toDataURL("image/png");
// console.log(image);
// return image;
// }
</script>
</body>
</html>
2694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
