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等技术制作海报
在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

随机推荐

VS2012 中不能安装ARCGIS 10.0 SDK的解决方法
问题描述在ARCGIS 安装SDK时就会出错原因是ARCGIS SDK 10.0只能在VS2010中安装,因为我本机是安的VS2012所以安装不成功. 解决方法一,在注册表中HKE ...
新建/初始化git项目
Command line instructions Git global setup git config --global user.name "你的名字" git config ...
Code First 更新数据库记录
每次都会忘记这个,所以记录一下第一步:打开程序包管理控制台第二步:启动迁移配置第三步: 更新数据库的迁移的名称因为设置了多个context,所以要指定更新的是哪一个库. 如果没有指定,会出现下 ...
LINQ to objects遇到的小坑
1.C#中LINQ to Objects中延迟查询的陷阱(其他类型的LINQ也基本一致) 之前在不了解LINQ延迟查询的时候,我使用下面的这种方式,将where语句的结果直接as为List<T& ...
C# 多线程弹出模态MessageBox的一种方法
在多线程中,有时候使用MessageBox.Show方法弹出对话框,弹出的Messagebox不是模态的,不能满足我的要求.经过研究,如下实现 private void button1_Click(o ...
【bug记录】jpa 解决org.hibernate.lazyinitializationexception could not initialize proxy - no session
前言最近开发项目比较忙,Spring Cloud的笔记得稍稍放放了,下午出来个bug,恶心的不行,功能很简单,也没有什么级联或复杂的映射关系,就是一直在报三个异常 Caused by: com.fa ...
Elasticsearch批量操作API用法介绍
Elasticsearch的Bulk API允许批量提交index和delete请求,有如下两种用法: 用法1 BulkRequestBuilder requestBuilder = client.p ...
jvm高级特性(5)(1)（原子性,可见性,有序性，volatile，概述)
JVM高级特性与实践(十二):高效并发时的内外存交互.三大特征(原子.可见.有序性) 与 volatile型变量特殊规则简介: 阿姆达尔定律(Amdahl):该定律通过系统中并行化与串行化的比重来描 ...
Java_使用日志
日志有什么用? 在实际开发中,不可能使用控制台输出所有数据,可以用日志把程序运行的过程记录下来,包括运行中出现的异常和BUG 当出现问题的时候,程序员可以去查看日志,从而能快速的找到问题所在. 一般来 ...
Python字典按值排序、包含字典的列表按字典值排序的方法
operator.itemgetter函数 operator模块提供的itemgetter函数用于获取对象的哪些维的数据,参数为一些序号(即需要获取的数据在对象中的序号),要注意,operator.i ...

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

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

随机推荐

热门专题