前言:

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

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

代码如下:

/**
* 绘制canvas
*/
function draw(name='大威德', score = 23, level = 1, str = '哈哈哈哈') {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
// 绘制背景
var img = new Image();
img.src = "images/newbg.jpg";
img.onload = function () {
ctx.drawImage(img, 0, 0,375,640);
// 绘制底部文字
ctx.font = "bold normal 20px Microsoft YaHei";
ctx.fillStyle = "black";
ctx.fillText(name, 375 * 0.18, 640 * 0.34);
ctx.font = "bold normal 20px Microsoft YaHei";
ctx.fillStyle = "red";
ctx.fillText(score, 375 * 0.63, 640 * 0.345);
ctx.fillStyle = "black";
ctx.fillText(level, 375 * 0.37, 640 * 0.458);
ctx.font = "normal 18px Microsoft YaHei";
ctx.fillStyle = "black";
// 绘制多行文字
canvasTextAutoLine(str, c, 375 * 0.1, 640 * 0.5, 20);
      var imgsrc = c.toDataURL("image/jpeg",1);
    };

}
/*
str:要绘制的字符串
canvas:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高,自己定义个值即可
*/
function canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
var ctx = canvas.getContext("2d");
var lineWidth = 0;
var canvasWidth = document.documentElement.clientWidth;
var lastSubStrIndex = 0;
for (let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > canvasWidth * 0.8) {//减去initX,防止边界出现的问题
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
initY += lineHeight;
lineWidth = 0;
lastSubStrIndex = i;
}
if (i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
}
}
}

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

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

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

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

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

综上:

利用前端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. 记录:C++类内存分布(虚继承与虚函数)

    工具:VS2013 先说一下VS环境下查看类内存分布的方法: 先选择左侧的C/C++->命令行,然后在其他选项这里写上/d1 reportAllClassLayout,它可以看到所有相关类的内存 ...

  2. ZXing 生成、读取二维码(带logo)

    前言 ZXing,一个支持在图像中解码和生成条形码(如二维码.PDF 417.EAN.UPC.Aztec.Data Matrix.Codabar)的库.ZXing(“zebra crossing”)是 ...

  3. MySQL 笔记整理(5) --深入浅出索引(下)

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> 5) --深入浅出索引(下) 这次的笔记从一个简单的查询开始: 建表语句是这样的 mysql> create table T ...

  4. C# 通过进程名/进程Id 操作窗口/程序

    1. 判断窗口是否存在 private bool IsWindowExist(IntPtr handle) { ) != IntPtr.Zero) && IsWindowVisible ...

  5. 如何去掉C#字符串中的所有空格(转载)

    如何去掉C#字符串中的所有空格 来源:https://www.cnblogs.com/donchen/p/8966059.html 字符串行数Trim()可以去掉字符串前后的空格,如:  C# Cod ...

  6. [日常] nginx记录post数据

    1.使用log_format指令来更改日志格式,该指令只能放在http{}段 log_format  日志名  '日志内容'; server { access_log /var/log/nginx/d ...

  7. 后端开发者的Vue学习之路(二)

    目录 上篇内容回顾: 数据绑定 表单输入框绑定 单行文本输入框 多行文本输入框 复选框checkbox 单选框radio 选择框select 数据绑定的修饰符 .lazy .number .trim ...

  8. TCP客户端

    TCP通信客户端-解决数据包接收不全的过程 背景:5个串口条码枪,通过MOXA Nport系列转换器,以TCPServer的形式推送扫描到的条码到客户端.5个条码枪均位于流水线上方的支架上,流水线货物 ...

  9. po编程——自动化测试面试必问

    先来看一个在腾讯课堂首页搜索机构的操作步骤: 1:首先打开腾讯课堂的首页:https://ke.qq.com 2:点击课程或机构的下拉选择图标 3:选择机构 4:在搜索框输入要搜索的机构名称 5:点击 ...

  10. 关于在Python2中使用列表推导式会遇到的问题

    摘自<流畅的Python>第二部分第二章2.2 Python 2.x 中,在列表推导中 for 关键词之后的赋值操作可能会影响列表推导上下文中的同名变量.像下面这个 Python 2.7 ...