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

一个很简单的小列子，直接贴代码，代码中都有注释，下面有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><!--输入框，失去焦点后自动执行hechen()--><input type="text" id="desc" onblur="hechen()" value="" /><!--saveImageInfo()生成照片并显示到另个网页--><button onclick="saveImageInfo()">确认生成</button><script>//预加载将图片绘制到画布$(function(){hechen();});function hechen(){//获取时间2012-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源码链接
上面那个积分现在变得太高了
百度云链接链接：https://pan.baidu.com/s/1monENQf9QSqWkNhbPQ7YxA 密码：7gro

H5网页Canvas画布绘图图片文字合成相关推荐

canvas图片文字合成（小程序分享）
写这个的原因是在写一个小程序的需求的时候用到了,在此记录一下. 需求需要实现的点就是:在分享小程序个人资料页面的时候将个人信息和个人头像进行重叠放在一起然后分享出去,大概样子如下: 不同的用户头像不同 ...
H5 canvas画布字体图片模糊变清晰
H5 canvas画布字体图片模糊处理 <canvas id="canvas " width="386px" height="386px&qu ...
jsjq来封装一个图片文字合成图案的方法
记录一下:封装一个图片文字合成图案的方法这里首先做个说明项目里使用到用canvas生成海报,在toDataURL报了这个错误Tainted canvases may not be exported ...
CANVAS drawImage 绘图图片模糊已解决
CANVAS drawImage 绘图图片模糊解决不可以在CSS中定死canvas画布的长宽, 在绘图时给出canvas宽高具体JS代码: const canvas = document.getE ...
html：canvas画布绘图简单入门-绘制时钟-3
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
html：canvas画布绘图简单入门-画板-5
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片
uni-app微信小程序图片加水印,点击看这篇需求场景: 要求上传图片,并给图片添加水印.传给后端的也是有水印的图片. 逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到 ...
（H5）canvas实现裁剪图片和马赛克功能，以及又拍云上传图片
1.核心功能此组件功能包含: 图片裁剪(裁剪框拖动,裁剪框改变大小): 图片马赛克(绘制马赛克,清除马赛克): 图片预览.图片还原(返回原图.返回处理图): 图片上传(获取签名.上传图片). 2.核 ...
java使用Graphics2D进行图片文字合成示例
功能介绍:通过Graphics2D在一张背景图上添加文字描述和图片. 合成效果示意图: 代码示例: 在代码中对每步操作做了详细的注释 import java.awt.Color; import jav ...

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

H5网页Canvas画布绘图图片文字合成相关推荐

最新文章

热门文章

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

H5网页Canvas画布绘图 图片文字合成相关推荐

最新文章

热门文章

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

H5网页Canvas画布绘图图片文字合成相关推荐