<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
margin: 0;
padding: 0;
}
button{
width: 100px;
height: 60px;
}
#code{
position: relative;
}
</style>
</head>
<body>
<div id="code">
</div>
<canvas id="main" height="700" width="420" style="border:1px solid #d3d3d3;"></canvas>
<!--saveImageInfo()生成照片并显示到另个网页-->
<button onclick="saveImageInfo()">生成图片</button>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
//预加载将图片绘制到画布
$(function(){
drawImg();
});
function drawImg(){
$("#code").qrcode({
render: "canvas", //table方式
120, //宽度
height:145, //高度
text: "www.helloweba.com" //任意内容
});
//获取画布对象
var mainCtx = getCanvasContext('main');
var maxWidth = mainCtx.width;
var maxHeight = mainCtx.height;
var qrcode=$('#code').find('canvas')[0];
mainCtx.clearRect(0,0,1000,1000);
//获取图片的实际路径
var starImg = new Image();
var starImg1 = new Image();
var starImg2 = new Image();
starImg.src='bg-alert.png';
starImg1.src='myorder_03.png';
starImg2.src='myorder_03.png';
//背景图
starImg.onload=function(){
//先把图片绘制在这里
mainCtx.drawImage(starImg,0,0,420,730);
//绘制二维码
mainCtx.drawImage(qrcode,150,500)
//设置用户文本的大小字体等属性
mainCtx.font = "small-caps bold 18px STXinwei";
//设置用户文本填充颜色
mainCtx.fillStyle = "white";
//绘制文字
mainCtx.fillText('阿瑟发',120,110);
};
// 商品图
starImg1.onload=function(){
//先把图片绘制在这里
mainCtx.drawImage(starImg1,150,280,120,120);
};
starImg2.onload=function(){
//先把图片绘制在这里
mainCtx.drawImage(starImg2,200,560,30,30);
};
}
//通过id获取canvas对象
function getCanvasContext(id){
return document.getElementById(id).getContext("2d");
}
//将画布生成图片
function saveImageInfo() {
var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/jpg");
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+image+"' alt='from canvas'/>");
}
//下载图片
function saveAsLocalImage(){
var myCanvas = document.getElementById("main");
var image = myCanvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream");
window.location.href=image;
}
</script>
</body>
</html>
