newImage(text) {
                // 生成图片
                var imageBox = document.getElementById("newimage")
                var canvas = document.getElementById("canvas")
                var cxt = canvas.getContext("2d")
                var img = new Image()
                img.src = require('assets/img/activity/1.jpg')
                // 图片加载完成,才可处理
                img.onload = () => {
                    // 画图(这里画布与图片等宽高)
                    cxt.drawImage(img, 0, 0)
                    // 设置字体大小
                    cxt.font = "28px Microsoft YaHei"
                    // 更改字号后,必须重置对齐方式,否则居中麻烦。设置文本的垂直对齐方式
                    cxt.textBaseline = 'middle'
                    cxt.textAlign = 'center'
                    // 距离左边的位置
                    var left = canvas.width / 2
                    // 距离上边的位置 (图片高-文字距离图片底部的距离)
                    var top = canvas.height - 328
                    // 文字颜色
                    cxt.fillStyle = "#000"
                    // 文字在画布的位置
                    cxt.fillText(text, left, top)
                    imageBox.src = canvas.toDataURL("image/jpg")
                    this.flag = 1
                }
            },

canvas在图片上生成文字的更多相关文章

  1. Android 使用Canvas在图片上绘制文字

    一个小应用,在图片上绘制文字,以下是绘制文字的方法,并且能够实现自动换行,字体自动适配屏幕大小 private void drawNewBitmap(ImageView imageView, Stri ...

  2. 图像处理---《在图片上打印文字 FreeType库》

    图像处理---<在图片上打印文字 FreeType库> 目的:想在处理之后的图像上打印输出结果.方法: (1)只在图像上打印 数字.字母的话:                1.Mat格式 ...

  3. C#图像处理(1):在图片上加文字和改变文字的方向

    C#在图片上加文字,代码如下: /// <summary> /// 图片上方加文字,文字将会被180度反转 /// </summary> /// <param name= ...

  4. C#实现图片叠加,图片上嵌入文字,文字生成图片的方法

    /// <summary>     /// 图片叠加     /// </summary>     /// <param name="sender"& ...

  5. python 图片上添加文字

    import PIL from PIL import ImageFont from PIL import Image from PIL import ImageDraw #设置字体,如果没有,也可以不 ...

  6. 使用Qpaint在图片上写文字

    开发过程中需要实现在图片上叠加文字,可以采用Qpaint在图片上写文字,然后将图片显示在上面.再将Qlabel加到Qwidget中.效果如下 //创建对象,加载图片 QPixmap pix; pix. ...

  7. 函数putText()在图片上写文字

    #include <iostream> #include <opencv2/opencv.hpp> using namespace std; using namespace c ...

  8. 把图片上的文字转换成word文字?

    转换后的文字不是很如意,但是免费方便. 1.打开Office办公软件自带的OneNote工具.随便新建一个笔记页面,以方便我们接下来的操作. 2.插入图片.在菜单栏里点击[插入],选择插入[图片],找 ...

  9. 如何去除图片上的文字(PS使用教程)

    很多时候由于工作的需要,需要对我们的图片进行修改,修改的同时还想要保存我们的图片背景,所以很多人就不知道怎么弄了,小编跟大家分享一下使用PS如何简单的去掉图片上的文字,希望对大家有所帮助! 方法/步骤 ...

随机推荐

  1. .Net Core-3.0-新闻:宣告推出.NET Core 3.0 Preview 7

    ylbtech-.Net Core-3.0-新闻:宣告推出.NET Core 3.0 Preview 7  1.返回顶部 1. 今天,我们宣布推出.NET Core 3.0 Preview 7.我们已 ...

  2. FreeBSD上安装Cassandra 3.10

    哈哈,你居然点进来了,来吧,一起吐槽FreeBSD啊,装了一上午Cassandra 3.10都没有装成功, 终于,鄙人一条 shutdown -p now 结束了FreeBSD,默默打开了CentOS ...

  3. WPF WebBrowser 加载 html ,出现安全警告, 运行 脚本和 activeX 控件,

    对于你的问题,只需要在你的HTML首行添加如下代码即可隐藏安全提示条: <!-- saved from url=(0014)about:internet --> 还有一个可选方案是使用Wi ...

  4. 读取yaml中的内容

    def read_yml(path): """ 读取yml文件中的数据 :param path: 文件yaml 的路径 :return: 返回读取yaml文件内的结果 & ...

  5. gzip, deflate delphi xe 2 解码 成功 哈哈

    2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 http://bbs.csdn.net/topics/190020986   ...

  6. ARTS-3

    ARTS的初衷 Algorithm:主要是为了编程训练和学习.每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard).进行编程训练,如果不训练你看再多的算法 ...

  7. SpringCloud:(一)服务注册与发现

    最近跟着方志明老师学习SpringCloud,博客地址如下: https://blog.csdn.net/forezp/article/details/81040925 自己也跟着撸了一遍,纸上得来终 ...

  8. 【MM系列】SAP MM模块-BOM展开函数

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-BOM展开函数   ...

  9. expect替人进行交互

    expect是一门独立于shell的语言 用expect 执行写好的脚本 #!/usr/bin/expectspawn ssh root@192.168.40.67  (spawn  是expect ...

  10. 20191110 Spring Boot官方文档学习(3)

    3.使用Spring Boot 3.1.构建系统 建议选择Maven或Gradle作为构建工具 每个Spring Boot版本都提供了它所支持的依赖关系的精选列表.实际上,您不需要为构建配置中的所有这 ...