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

随机推荐

asp.net mvc 在JS中跳转到其它controller/action
平时在ASP.NET 中经常这样写, $('#loginOut').click(function() { $.messager.confirm('系统提示', '您确定要退出本次登 ...
全自动baidu云盘下载脚本
20141231<吃元宵>孔云龙_6平米.MP3 20141231<家庭论>李云杰_6平米.MP3 20141231<劫皇杠>李昊洋_6平米.MP3 2014123 ...
Code First 更新数据库记录
每次都会忘记这个,所以记录一下第一步:打开程序包管理控制台第二步:启动迁移配置第三步: 更新数据库的迁移的名称因为设置了多个context,所以要指定更新的是哪一个库. 如果没有指定,会出现下 ...
ASP.NET Core使用EF Core操作MySql数据库
ASP.NET Core操作MySql数据库, 这样整套环境都可以布署在Linux上使用微软的 Microsoft.EntityFrameworkCore(2.1.4) 和MySql出的 MySql ...
.net core An assembly specified in the application dependencied mainfest<****.json>was not found解决办法
最近在开发项目中,遇到了一个问题.在本机开发中部署到本机iis上或者本机控制台都没有问题,运行正常.当发布部署到服务器(windowsServer)中的时候一直运行不起来,用控制台也运行不起来,直接报 ...
“全栈2019”Java多线程第十九章：死锁详解
难度初级学习时间 10分钟适合人群零基础开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
flask之信号
Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为. pip3 install blinker 1. 内置信号 request_started = ...
hello lua
http://manual.luaer.cn/ http://www.lua.org/pil/contents.html #include <cstdio> #include <st ...
Django(wsgiref、jinja2模块使用介绍)
day60 wsgiref比较稳定 """ 根据URL中不同的路径返回不同的内容--函数进阶版返回HTML页面让网页动态起来 wsgiref模块版 "&qu ...
javascript浅拷贝深拷贝理解记录
javascript的深拷贝和浅拷贝问题几乎是面试必问的问题.好记性不如烂笔头,特此来记录一下自己对深拷贝浅拷贝的理解. 顾名思义,拷贝就是copy复制,在js中可以浅而理解为对一个对象或者数组的复制 ...

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

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

随机推荐

热门专题