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

最新推荐文章于 2024-05-10 23:06:47 发布

季小沫的故事

最新推荐文章于 2024-05-10 23:06:47 发布

阅读量1.7w

点赞数 7

分类专栏： JavaScript HTML 文章标签： canvas 图文合成

本文链接：https://blog.csdn.net/Ani521smile/article/details/53317216

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 1 订阅

订阅专栏

一个很简单的小列子，直接贴代码，代码中都有注释，下面有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-12
        var 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

季小沫的故事

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
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/jque
复制链接

扫一扫