前言:

我们在做项目过程中,经常会遇到自定义生成一张图片并可以长按保存。长按保存图片在微信等浏览器中默认就有,那么对于生成图片的有哪些方式呢?

方法一: 利用canvas绘制图形,然后生成图片

代码如下:

  1. /**
  2. * 绘制canvas
  3. */
  4. function draw(name='大威德', score = 23, level = 1, str = '哈哈哈哈') {
  5. var c = document.getElementById("canvas");
  6. var ctx = c.getContext("2d");
  7. // 绘制背景
  8. var img = new Image();
  9. img.src = "images/newbg.jpg";
  10. img.onload = function () {
  11. ctx.drawImage(img, 0, 0,375,640);
  12. // 绘制底部文字
  13. ctx.font = "bold normal 20px Microsoft YaHei";
  14. ctx.fillStyle = "black";
  15. ctx.fillText(name, 375 * 0.18, 640 * 0.34);
  16. ctx.font = "bold normal 20px Microsoft YaHei";
  17. ctx.fillStyle = "red";
  18. ctx.fillText(score, 375 * 0.63, 640 * 0.345);
  19. ctx.fillStyle = "black";
  20. ctx.fillText(level, 375 * 0.37, 640 * 0.458);
  21. ctx.font = "normal 18px Microsoft YaHei";
  22. ctx.fillStyle = "black";
  23. // 绘制多行文字
  24. canvasTextAutoLine(str, c, 375 * 0.1, 640 * 0.5, 20);
      var imgsrc = c.toDataURL("image/jpeg",1);
  1. };
  2.  
  3. }
  4. /*
  5. str:要绘制的字符串
  6. canvas:canvas对象
  7. initX:绘制字符串起始x坐标
  8. initY:绘制字符串起始y坐标
  9. lineHeight:字行高,自己定义个值即可
  10. */
  11. function canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
  12. var ctx = canvas.getContext("2d");
  13. var lineWidth = 0;
  14. var canvasWidth = document.documentElement.clientWidth;
  15. var lastSubStrIndex = 0;
  16. for (let i = 0; i < str.length; i++) {
  17. lineWidth += ctx.measureText(str[i]).width;
  18. if (lineWidth > canvasWidth * 0.8) {//减去initX,防止边界出现的问题
  19. ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
  20. initY += lineHeight;
  21. lineWidth = 0;
  22. lastSubStrIndex = i;
  23. }
  24. if (i == str.length - 1) {
  25. ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
  26. }
  27. }
  28. }

小结:这种方式较为繁琐,因为绘制canvas的过程本身过程较多,远远没有布局一个页面简单。

方法二:利用html2canvas实现截屏功能(原理也是将DOM对象生成canvas对象,然后再生成图片)

如下:你的html引入html2canvas后,把id为result的dom先生成canvas,然后canvas生成图片。即可实现类似截屏效果!

  1. html2canvas(document.getElementById('result'), { scale: 2, logging: false, useCORS: true }).then(function (canvas) {
  2. var dataUrl = canvas.toDataURL();
  3. console.log(dataUrl)
  4. that.imgsrc = dataUrl;
  5. });

小结:这种方式较简单,而且清晰度较高,但是要注意的是,一定不能把图片当背景来操作,否则清晰度也不高。

综上:

利用前端H5生成图片过程中,我们应该更多利用方式二来进行!

关于H5页面中生成图片的两种方式!的更多相关文章

  1. Android中H5和Native交互的两种方式

    Android中H5和Native交互的两种方式:http://www.jianshu.com/p/bcb5d8582d92 注意事项: 1.android给h5页面注入一个对象(WZApp),这个对 ...

  2. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  3. K:java中序列化的两种方式—Serializable或Externalizable

    在java中,对一个对象进行序列化操作,其有如下两种方式: 第一种: 通过实现java.io.Serializable接口,该接口是一个标志接口,其没有任何抽象方法需要进行重写,实现了Serializ ...

  4. web项目中实现页面跳转的两种方式

    <a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...

  5. C#反射实现 C# 反射 判断类的延伸类型 使用代码生成工具Database2Sharp快速生成工作流模块控制器和视图代码 C# ADO.NET的SqlDataReader对象,判断是否包含指定字段 页面中添加锚点的几种方式 .net 简单实用Log4net(多个日志配置文件) C# 常用小点

    C#反射实现   一.反射概念: 1.概念: 反射,通俗的讲就是我们在只知道一个对象的内部而不了解内部结构的情况下,通过反射这个技术可以使我们明确这个对象的内部实现. 在.NET中,反射是重要的机制, ...

  6. html页面保存数的两种方式

    原文链接:https://blog.csdn.net/qq_37936542/article/details/78866755 需求:微信开发时,在某个页面授权获取用户的openid,但是每次刷新页面 ...

  7. java程序中抛出异常的两种方式,及异常抛出的顺序

    在java中,会经常遇到异常,java提供了两种抛出异常的方式. 方式一: throws ,抛出具体代码中的异常,这种方式编译器都会提示,举例: public static void main(Str ...

  8. java中创建多线程两种方式以及实现接口的优点

    多线程创建方式有两种 创建线程的第一种方式.继承Thread类 1.继承Thread类 2.重写Thread类中的run方法--目的将自定义代码存储在run方法.让线程执行3.调用线程的start() ...

  9. jsp中一个标签两种方式绑定两个click事件导致未执行的问题

    近日,在开发过程中,写了一个标签 <li id="a1" onclick="doSomething()">...</li> 在js页面中 ...

随机推荐

  1. 2016年Scrum状态调查报告

    背景 Scrum是一种迭代式增量软件开发过程,通常用于敏捷软件开发,包括一系列实践和预定义角色的过程骨架.Scrum由Jeff Sutherland和Ken Schwaber在一次IBM项目合作中研究 ...

  2. 数据结构(java版)学习笔记(一)——线性表

    一.线性表的定义 线性表是n(n>=0)个具有相同特性的数据元素的有限序列. 线性表是最简单.最常用的一种数据结构 线性表属于线性结构的一种 如果一个数据元素序列满足: (1)除第一个和最后一个 ...

  3. springboot之配置文件

    springboot在加载配置文件的时候是有先后顺序的,了解加载配置文件的先后顺序,可以减少编写程序出现错误 1 springboot加载配置文件的先后顺序如下: SpringApplication将 ...

  4. Object.keys 及表单清空

    Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性.这些属性的顺序与手动遍历该对象属性时的一致. // simple array var ar ...

  5. iOS----------对单元格取余

    if (indexPath.row % 2 == 0) { cell.backgroundColor = [UIColor magentaColor]; }else{ cell.backgroundC ...

  6. CTS问题分析6

    遇到一个Android P相关的问题,和原来CTS/GTS 问题分析1的表现是一样的,但是将 这个修复cp过来,发现不生效,仍然报错,因此记录一下 问题初探 测试命令: run gts -m GtsG ...

  7. js 条件判断

    练习 小明身高1.75,体重80.5kg.请根据BMI公式(体重除以身高的平方)帮小明计算他的BMI指数,并根据BMI指数: 低于18.5:过轻 18.5-25:正常 25-28:过重 28-32:肥 ...

  8. delphi做的程序如何连接SQL数据库

    1. 新建一个FORM.在控件栏找到ADO一栏,把里面的ADOConnection和ADOQuery两个各建立一个放在FORM里.这两个控件运行后是不可见的,所以你可以随便放在FORM的任何位置.然后 ...

  9. MFC桌面电子时钟的设计与实现

    目录 核心技术 需求分析 程序设计 程序展示 (一)核心技术 MFC(Micosoft Foundation Class Libay,微基础类库)是微基于Windows平台下的C++类库集合,MFC包 ...

  10. Windows系统资源监控

    1.windows自带系统资源监控工具 2.Windows监控的数据来源:Performance Counters 2.1 Performance Counter架构 2.2 Performance ...