使用的工具是：html2canvas

html2canvas(this.currentRef)

          .then(async (canvas) => {

            let url = canvas.toDataURL('image/png')

            this.largeScreenForm.screenshotImage = url

            })
this.currentRef是要操作的div

备注：如果要生成图片的div有背景图，那么背景图必须是base64，不然转canvas失败

html转换成canvas的更多相关文章

  1. 使用Canvas把照片转换成素描画

    原文:http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/ 腾讯的alloy team写的一个素描效果,挺不错的. ...

  2. 使用的是html5的canvas将文字转换成图片

    当前功能的运用场景是:用户需要传文件给他人,在用户选择文件之后需要显示一个文件图标和所选文件的名称. 当前代码部分是摘自网上,但是已经忘记在什么地方获取的,如有侵权联系小弟后自当删除. 注意:必须在h ...

  3. 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  4. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  5. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  6. C# Base64字符串转换成图片及图片转换为Base64

    最近有朋友经常会问我一些问题,例如,如何把一个字符串转换成base64字符串,如何把一个二进制文件转换成Base64文件,以及如何转换回原有的文件,在此我把方法写一下   字符串与Base64相互转换 ...

  7. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  8. qrcode.js插件将你的内容转换成二维码格式

    ---qrcode.js插件将你的内容转换成二维码格式--- 我之前一直想知道二维码是怎么生成,所以就了解了一下, 最后还是不知道它的原理, 但是,我知道怎么生成. 现在就让我带你制作一个你喜爱的二维 ...

  9. 利用jpedal进行pdf转换成jpeg,jpg,png,tiff,tif等格式的图片

    项目中运用到pdf文件转换成image图片,开始时使用pdfbox开源库进行图片转换,但是转换出来的文件中含有部分乱码的情况.下面是pdfBox 的pdf转换图片的代码示例. try{ String ...

随机推荐

  1. 学好linux必须精通用户管理的章节知识

    第12章 Linux中用户知识管理 12.1 系统开机启动流程 12.1.1 centos6系统开机启动流程 12.1.1.1 开机系统流程语言描述 服务器电源开关打开 bios自检 目的:检查硬件是 ...

  2. latex常用技巧

    画表格 \usepackage{multirow} \begin{tabular}{cccc} \hline \multicolumn{4}{c}{学生信息}\\ \hline 班级& 姓名& ...

  3. 【Web技术】401- 在 React 中使用 Shadow DOM

    本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...

  4. pyplot概述

            matplotlib.pyplot 是命令行风格的函数集,让matplotlib看起来像MATLAB.Each一样工作.pyplot函数能够对画布(figure)进行一些改变,例如:创 ...

  5. Linux防火墙的相关资料

    1.查看防火墙状态 [root@localhost ~]# service iptables status 2.编辑/etc/sysconfig/iptables文件.我们实例中要打开8080端口和9 ...

  6. 2016/10/21 java中的参数传方式

    参考:http://blog.sina.com.cn/s/blog_59ca2c2a0100qhjx.html http://www.cnblogs.com/caiyao/p/4964176.html

  7. Redis-API

    Redis-API 简介 Redis 是一个基于内存的高效的键值行非关系型数据库,存取效率极高. python提供了两个类:分别为Redis和StrictRedis来实现Redis的命令操作.Redi ...

  8. ZKWeb网页框架2.2.1正式发布

    2.2.1 更新的内容有 改进 EFCore 支持 支持自动 json 序列化字段 (通过 WithSerialization 选项) 支持懒加载 更新后 EFCore 可以使用所有默认插件 (ZKW ...

  9. 阿里云MVP 第十期全球发布：让天下没有难做的技术

    简介: MVPs与阿里云一起探索前路,用技术改变世界! 在云的世界中,从来没有“简单”二字,想成为一个优秀的开发者,也没有“简单”二字,而阿里云MVP就一直是云计算中最为顶尖的专家.现在,阿里云MVP ...

  10. C语言笔记 02_基本语法&数据类型&变量

    基本语法 令牌 C 程序由各种令牌组成,令牌可以是关键字.标识符.常量.字符串值,或者是一个符号.例如,下面的 C 语句包括五个令牌: printf("Hello, World! \n&qu ...