H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报

摘要：初略算了算大概有20天没有写博客了，原本是打算1月1号元旦那天写一个年终总结的，博客园里大佬们都在总结过去，迎接将来，看得我热血沸腾，想想自己也工作快2年了，去年都没有去总结一下，今年势必要总结一番了，但是工作任务有点紧，就把这件事搁置起来了，只好推到来年收假去写一篇总结性的博客了，说起写博客，还是我的一个室友推荐我来写的，当时就觉得上班任务都做不完，哪有时间来写博客，后来发现自己有问题就去找别人的博客来解决，就想着自己也写博客，把自己不知道或者有经验的记录下来，一方面以后遇到同样的问题可以来参考，另一方面说不定也多多少少能帮助到一些人，现在也断断续续写了大概20篇博客了，每当别人留言说学到了，我就坚定了我写博客的想法了，咳咳，话题扯开了，扯回来......

en,然后我要说什么来着？对，如何用画布生成一张海报，就像这样：

咳咳，拿错了，拿出我写的生成报告的图片的，博客这里介绍入门级的，再来一次，就像这样：

嗯，本文就按照上方这张海报来进行讲解（图文与博主实际想法不符）。

一.什么是Canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

二.创建一个画布（Canvas）

<canvas id="aa" width="370px"height="667px" style="display: none;"></canvas>

三.Canvas-文本

var aa = document.getElementById('aa');

var bb = aa.getContext('2d');

bb.fillStyle = '#fff';   // 文字填充颜色

bb.font = '30px Adobe Ming Std';

bb.fillText('猪年快乐！',120,200);

四.Canvas-图片

var imgtwo = new Image;

imgtwo.src = 'img/rjgx-canvasthree.png';

imgtwo.onload = function () {

   bb.drawImage(imgtwo, 0,0,370,667);

}

五.Canvas-文本换行

fillText()在固宽的canvas中，字数过多的时候，并不会自动换行，我们可以增加canvas本身的宽度，但这不是解决问题的根本方法。还记得之前介绍canvas基本api的时候，有一个函数，

context.measureText(text)

这个函数可以测量字体的宽高度，那就好办了，我们计算好我们字符串的长度加上一个大概的宽度，基本上可以处理这种换行的问题了。

bb.fillStyle = 'yellow';

bb.font = '26px Adobe Ming Std';

bb.lineWidth=1;

var str = "哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈"

//            bb.fillText(str,65,750);

var lineWidth = 0;

var canvasWidth = aa.width-50;//计算canvas的宽度

var initHeight=400;//绘制字体距离canvas顶部初始的高度

var lastSubStrIndex= 0; //每次开始截取的字符串的索引

for(let i=0;i<str.length;i++){

lineWidth+=bb.measureText(str[i]).width;

if(lineWidth>canvasWidth){

  bb.fillText(str.substring(lastSubStrIndex,i),25,initHeight);//绘制截取部分

  initHeight+=40;//40为字体的高度

  lineWidth=25;

  lastSubStrIndex=i;

}

if(i==str.length-1){//绘制剩余部分

  bb.fillText(str.substring(lastSubStrIndex,i+1),25,initHeight);

}

}

六.Canvas-加入容器

window.onload=function(){

var img = convertCanvasToImage(aa);

$('.box').append(img);

console.log(img);

}

function convertCanvasToImage(canvas) {

    var image = new Image();

    image.src = canvas.toDataURL("image/png");

    return image;

}

七.Canvas-下载

//下载海报

function downloadimg() {

    var img = $('.box').children('img').attr("src");

    var alink = document.createElement("a");

    alink.href = img;

    alink.download = "新年快乐.png";

    alink.click();

}

八.整体代码

好了好了，知道了，我其实也不喜欢看介绍，直接给我个demo多好，直接复制看效果，但是不介绍直接发代码会被移除首页的，所以，你们就勉为其难看一下吧，希望有用：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <title>文字+图片+下载图片</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

    </style>

</head>

<body>

    <canvas id="aa" width="370px"height="667px" style="display: none;"></canvas>

    <div class="box" style="background-color:red;width: 370px;height: 667px;"></div>

    <input type="button"  value="下载画报" style="margin-left: 150px;margin-top: 20px;" onclick="downloadimg()"/>

    <script>

        var aa = document.getElementById('aa');

        var bb = aa.getContext('2d');

        var imgone = new Image;

        imgone.src = 'img/happy.png';

        imgone.onload = function () {

            bb.drawImage(imgone, 0,0,370,667);

            bb.fillStyle = '#fff';   // 文字填充颜色

            bb.font = '30px Adobe Ming Std';

            bb.fillText('猪年快乐！',120,200);

            bb.fillStyle = '#fff';

            bb.font = '40px Adobe Ming Std';

            bb.fillText('2019年',120,270);

            bb.fillStyle = '#fff';

            bb.font = '26px Adobe Ming Std';

            bb.fillText('Bug也会一直陪在你身边',40,320);

            bb.fillStyle = 'yellow';

            bb.font = '26px Adobe Ming Std';

            bb.lineWidth=1;

            var str = "哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈"

//            bb.fillText(str,65,750);

            var lineWidth = 0;

            var canvasWidth = aa.width-50;//计算canvas的宽度

            var initHeight=400;//绘制字体距离canvas顶部初始的高度

            var lastSubStrIndex= 0; //每次开始截取的字符串的索引

            for(let i=0;i<str.length;i++){

                lineWidth+=bb.measureText(str[i]).width;

                if(lineWidth>canvasWidth){

                    bb.fillText(str.substring(lastSubStrIndex,i),25,initHeight);//绘制截取部分

                    initHeight+=40;//40为字体的高度

                    lineWidth=25;

                    lastSubStrIndex=i;

                }

                if(i==str.length-1){//绘制剩余部分

                    bb.fillText(str.substring(lastSubStrIndex,i+1),25,initHeight);

                }

            }

        }

        window.onload=function(){

        var img = convertCanvasToImage(aa);

        $('.box').append(img);

        console.log(img);

        }

        function convertCanvasToImage(canvas) {

            var image = new Image();

            image.src = canvas.toDataURL("image/png");

            return image;

        }

        //下载海报

        function downloadimg() {

            var img = $('.box').children('img').attr("src");

            var alink = document.createElement("a");

            alink.href = img;

            alink.download = "新年快乐.png";

            alink.click();

        }

    </script>

</body>

</html>

总结，希望这篇文章对大家有用，如果觉得博主写的还可以，欢迎点关注哦，明年会更新我的2018年终总结哦，在这里祝大家2019年新年快乐，早日脱单，永不脱发，有什么问题欢迎留言，

H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报的更多相关文章

H5 新增标签canvas 画布
canvas是写在body中的标签,设置宽高后,通过JS来往其中绘制想要的内容, canvas可以理解为一个画板,而JS就是你的画笔. 1.获取到画布 var canvas = document.ge ...
使用canvas画布生成二维码
1. 基本用法 <canvas>标签只有两个属性-----width和height CSS: <canvas class="qrcode" width=" ...
svg转化成canvas以便生成base64位的图片
很久前写了关于把html转成图片的一个例子,最近有出了新的问题.利用html2canvas.js文件把html转成base64位的图片是没什么问题的,但也不是绝对的,比如这时候不能碰见svg这个鬼,h ...
java 二维码生成（可带图片）springboot版
本文(2019年6月29日飞快的蜗牛博客) 有时候,男人和女人是两个完全不同的世界,男人的玩笑和女人的玩笑也完全是两码事,爱的人完全不了解你,你也不要指望一个女人了解你,所以男的不是要求别人怎么样, ...
使用zxing生成彩色或带图片的二维码
 <dependency> <group ...
[技术博客]海报图片生成——小程序canvas画布
目录背景介绍 canvas简介代码实现难点讲解圆角矩形裁剪失败之PS的妙用编码不要过硬对过长的文字进行截取真机首次生成时字体不对 drawImage只能使用本地图片背景介绍目标:利用 ...
h5开发中,利用微信或者QQ登陆以后获取用户头像在canvas画布显示问题
在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入 chrome://inspect/#devices可以用手机USB调试,打开) eg: ...
使用HTML5画布（canvas）生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
用H5中的Canvas等技术制作海报
在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

随机推荐

Python学习-16.Python中的错误处理
虽然叫错误,但跟 C# 中的异常是一回事.只不过 Python 中叫错误(Error)而 C# 中叫异常(Exception). 先手工产生一个异常: file = open('','r') 上面一句 ...
如何统计TFS代码库中的团队项目所占用的磁盘空间
在一个开发团队较多的研发中心,当开发人员的代码数据积累到一定程度,TFS系统的磁盘空间的使用率会逐渐成为系统管理员关注的问题.你可能会关注代码库中每个团队项目,甚至每个目录占用的的磁盘空间.不幸的,即 ...
Office - Outlook
将邮件存到本地服务器容量有限,避免丢失和经常提示容量不足步骤在File->Account Settings->Account Settings下面在Data Files标签页新建一 ...
The Beam Model：Stream & Tables翻译（上）
作者:周思华欢迎访问网易云社区,了解更多网易技术产品运营经验. 本文尝试描述Beam模型和Stream & Table理论间的关系(前者描述于数据流模型论文.the-world-beyond ...
odoo：开源ERP/安装和初始设置
1.1 Odoo的结构 Odoo使用Web浏览器来访问Odoo服务,因此你的Odoo服务器可以部署在较远的地方(如另外一个城市),用户的计算机上只需安装谷歌.火狐或 IE9 以上的浏览器,所以Web客 ...
CRUSH map 定制实例解析
1.提取已有的CRUSH map ,使用-o参数,ceph将输出一个经过编译的CRUSH map 到您指定的文件ceph osd getcrushmap -o crushmap.txt 2.反编译你的 ...
201621123018《Java程序设计》第2周学习报告
Week02-Java基本语法与类库 1.本周学习总结 Java数据类型分为基本数据类型和引用数据类型.布尔型是Java特有的数据类型.本周重点学习了字符串类型String,String类型中==和e ...
基于Zookeeper实现的分布式互斥锁 - InterProcessMutex
Curator是ZooKeeper的一个客户端框架,其中封装了分布式互斥锁的实现,最为常用的是InterProcessMutex,本文将对其进行代码剖析简介 InterProcessMutex基于Z ...
Flask从入门到精通之flask安装
使用虚拟环境安装Flask最简单的方式是使用虚拟环境,虚拟环境是python解释器的一个私有副本,在这个环境中你可以安装私有包,而且不会影响系统中安装的全局的Python解释器.虚拟环境非常有用,可 ...
this引用逃逸(使用内部类获取未外部类未初始化完的变量)，多态父类使用子类未初始化完的变量
1,this引用逃逸并发编程实践中,this引用逃逸("this"escape)是指对象还没有构造完成,它的this引用就被发布出去了. 这是危及到线程安全的,因为其他线程有可能 ...

H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报

H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报的更多相关文章

随机推荐

热门专题