使用的工具是：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. JVM系列三（垃圾收集器）.

    一.概述 1. 哪些内存需要回收 上篇文章 我们介绍了 Java 内存运行时区域的各个部分,其中程序计数器.虚拟机栈.本地方法栈三个区域随线程而生,随线程而灭,在这几个区域内就不需要过多考虑回收的问题 ...

  2. 【树莓派】制作启动SD卡

    版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ 下载烧写软件 烧写软件 将下载的压缩文件解压缩并安装到电脑上 下载树莓派镜像 树莓派系 ...

  3. MySQL使用可重复读作为默认隔离级别的原因

    一般的DBMS系统,默认都会使用读提交(Read-Comitted,RC)作为默认隔离级别,如Oracle.SQL Server等,而MySQL却使用可重复读(Read-Repeatable,RR). ...

  4. [修仙之路]React-Redux 金丹篇

    作者:水涛追求技术,但又不失生活的乐趣,过自己想要的生活 React-Redux简介 React-Redux可以使你的React项目拥有全局数据,可以使多个React组件读取到全局数据并且组件中也可修 ...

  5. .get的取值特点：.get只起到取值的作用 不能对原值修改

    #银行支付接口 def pay_interface(username,cost): user_dic=db_handler.select(username) if user_dic.get('bala ...

  6. eclipse 创建 springboot项目

    file --> new --> project --> Spring Boot  --> Spring  start  project Group:公司域名倒置,一般是com ...

  7. Linux配置免密登陆

    可能很多新手在配置免密登陆的时候第一次会经常没有配成功,会报错. 在这里将为大家演示最简洁且能一次配置成功的教程 首先以3台机器为例: 192.168.3.102 master 192.168.3.1 ...

  8. [译]C# 7系列，Part 1: Value Tuples 值元组

    Mark Zhou写了很不错的一系列介绍C# 7的文章,虽然是2年多年前发布的,不过对于不熟悉C# 7特性的同学来说,仍然有很高的阅读价值. 原文:https://blogs.msdn.microso ...

  9. mysql中msvcr120.dll文件丢失问题

    安装VC++2013 若是以上方法不能解决,需要下载安装VC++2013,这是微软官网的链接 https://www.microsoft.com/zh-cn/download/confirmation ...

  10. Appium(十)：元素定位(加强版)

    1. 元素定位 写完上一篇元素定位的博客,发现实用性基本为零.这几天真的烦死我了,一直在找资料,还去看了一遍appium官网文档.最后结合着selenium的定位方法,测试出几种可行的元素定位方法. ...