canvas将画布上的文字和图像显示并保存到本地上
直接上代码了!!
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas将画布上的文字和图像显示并保存到本地上</title>
</head>
<body>
<p>
<input type="button" value="显示图像和文字" id="show" style="width:410px;">
</p>
<p>
<input type="button" value="将图像和文字保存到本地" id="save" style="width:410px;"/>
</p>
<canvas id="myCanvas" style="width:410px;height:400px;"></canvas>
</body>
</html>
script代码:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
//点击显示在画布上的图像和文字
let myCanvas = document.querySelector("#myCanvas");
let myContext = myCanvas.getContext('2d') //创建2D画布
let myImage = new Image(); //创建图片对象
myImage.src= 'img/index.jpg'; //引入图片的路径
myImage.onload = function(){
//图片加载完毕执行
myContext.drawImage(myImage,0,0,myCanvas.width,myCanvas.height)
myContext.font = '16px 宋体';
myContext.lineWidth = 3;
myContext.strokeStyle = 'green';
myContext.strokeText('张三',140,50);
myContext.fillStyle= 'white';
myContext.fillText('张三',140,50);
}
})
$("#save").click(function(){
let myCanvas = document.querySelector("#myCanvas");
let myImage = myCanvas.toDataURL("image/png").replace("image/png","image/octet-stream");
window.location.href = myImage;
})
})
</script>
效果如下
