<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>明信片打印</title>
</head>
<style>
body {
background: rgb(204, 204, 204);
text-align: center;
}
* {
padding: 0;
margin: 0;
}
page[size="A4"] {
background: white;
width: 710px;
height: 1045px;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
padding-top: 0px;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
}
@media print {
body,
page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
</style>
<body>
<page size="A4" id="Canpage">
<img src="http://www.xxxxx.com/public/Htpublic/img/postcard.png" alt="" id="CanImg" />
</page>
<canvas id="myCanvas" width="710" height="1045"></canvas>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// window.print()
$("#Canpage").css('display','none');
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 绘制照片
var img = new Image();
// 图片地址
img.src = 'http://www.xxxxx.com/public/Htpublic/img/postcard.png';
img.onload = function() {
ctx.drawImage(img,0,0,710,1045);
// 绘制邮编
ctx.font="30px Arial";
// 邮编字符串转换为数组
const converToArray = number => [...`123465`].map(el => parseInt(el));
let pcode1 = converToArray('123465');
// "1 2 3 4 6 5"
ctx.fillText(pcode1[0]+' '+pcode1[1]+' '+pcode1[2]+' '+pcode1[3]+' '+pcode1[4]+' '+pcode1[5] ,40,86,300);
// 绘制收件地，超出宽度进行文字换行
ctx.font="24px Arial";
let AddText = '12345';
let AddCanWidth = 295;
let AddInitHeight=140;
let AddStrIndex= 0;
let AddlineWidth = 0;
for(let i=0;i<AddText.length;i++){
AddlineWidth+=ctx.measureText(AddText[i]).width;
if(AddlineWidth>AddCanWidth){
ctx.fillText(AddText.substring(AddStrIndex,i),26,AddInitHeight);
AddInitHeight+=60;
AddlineWidth=0;
AddStrIndex=i;
}
if(i==AddText.length-1){
ctx.fillText(AddText.substring(AddStrIndex,i+1),26,AddInitHeight);
}
};
// 绘制内容，超出宽度进行文字换行
ctx.font="24px Arial";
let TextText = '123456';
let TextCanWidth = 640;
let TextInitHeight=370;
let TextStrIndex= 0;
let TextlineWidth = 0;
for(let i=0;i<TextText.length;i++){
TextlineWidth+=ctx.measureText(TextText[i]).width;
if(TextlineWidth>TextCanWidth){
ctx.fillText(TextText.substring(TextStrIndex,i),26,TextInitHeight);
TextInitHeight+=57;
TextlineWidth=0;
TextStrIndex=i;
}
if(i==TextText.length-1){
ctx.fillText(TextText.substring(TextStrIndex,i+1),26,TextInitHeight);
}
};
// 绘制姓名
ctx.font="24px Arial";
ctx.fillText("46578",560,730,120);
// 绘制日期
ctx.font="24px Arial";
ctx.fillText("89456",560,790,120);
};
setTimeout(()=>{
var dataImg = c.toDataURL('image/png');
console.log(dataImg)
$("#Canpage").css('display','block');
$('#CanImg').attr('src',dataImg);
$('#myCanvas').css("display","none");
setTimeout(()=>{
window.print()
},1500)
},1500)
</script>
网友评论