<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#mycanvas {
border: 1px solid red;
margin-left: 500px;
}
</style>
</head>
<body>
<canvas id='mycanvas' width="300" height="320"></canvas>
<button type="button" id="save">保存</button>
<script type="text/javascript">
window.onload = function() {
var mycanvas = document.getElementById('mycanvas')
var ctx = mycanvas.getContext('2d')
var img = new Image();
img.onload = function() {
// 将图片画到canvas上面上去!
ctx.drawImage(img, 50, 60, 200, 200);
ctx.fillStyle = "red";
ctx.textAlign = 'center'
ctx.font = " bold 18px 微软雅黑";
ctx.fillText("华为", 150, 40);
ctx.strokeStyle = "blue";
ctx.font = " bold 16px 宋体";
ctx.textAlign = 'center'
ctx.strokeText("点击下载二维码", 150, 280);
}
img.src = "./img/1.png";
}
// 保存成png格式的图片
function saveAsPNG(canvas) {
return canvas.toDataURL("image/png");
}
document.getElementById("save").onclick = function() {
downLoad(saveAsPNG(mycanvas));
}
function downLoad(url) {
var oA = document.createElement("a");
oA.download = ''; // 设置下载的文件名,默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
</script>
</body>
</html>
canvas把图片和文字变成图片保存本地
最新推荐文章于 2024-07-11 21:32:10 发布