900字范文 > H5网页Canvas画布绘图图片文字合成

H5网页Canvas画布绘图图片文字合成

时间：2021-01-08 08:05:17

一个很简单的小列子，直接贴代码，代码中都有注释，下面有demo链接。

<html><head><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /><script src="js/jquery.js"></script></head><body><div style="display:none"><img id="starImg" style="height:100%; width:100%;" src="img/invitation.png" /></div><canvas id="main" height="730" width="420" style="border:1px solid #d3d3d3;"></canvas><input type="text" id="desc" onblur="hechen()" value="" /><button onclick="saveImageInfo()">确认生成</button><script>//预加载将图片绘制到画布$(function(){hechen();});function hechen(){//获取时间-12-12var mydate = new Date();var date = mydate.getFullYear()+'-'+(mydate.getMonth()+1)+'-'+mydate.getDate();//获取画布对象var mainCtx = getCanvasContext('main');var maxWidth = mainCtx.width;var maxHeight = mainCtx.height;mainCtx.clearRect(0,0,1000,1000);//获取图片的实际路径var starImg = new Image();starImg.src=$('#starImg').attr('src');//合成starImg.onload=function(){//先把图片绘制在这里mainCtx.drawImage(starImg,0,0,420,730);//读取用户的文本if($('#desc').val()){//设置用户文本的大小字体等属性mainCtx.font = "small-caps bold 18px STXinwei";//设置用户文本填充颜色mainCtx.fillStyle = "black";//绘制文字mainCtx.fillText($('#desc').val(),108,335);//设置时间文本的大小字体属性mainCtx.font = "small-caps bold 16px STXinwei";//绘制时间mainCtx.fillText(date,326,447);}};}//通过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>

demo源码链接

上面那个积分现在变得太高了

百度云链接链接：/s/1monENQf9QSqWkNhbPQ7YxA 密码：7gro

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。