使用的工具是：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. 基于iCamera App Kit 测试oV5640 500w分辨率 摄像头 总结

    基于iCamera App Kit 测试oV5640 摄像头 总结 iCamera App Kit 下载地址 http://pan.baidu.com/s/1kUMIwB1 可以参考下载链接的说明手册 ...

  2. iSensor App Kit 测试之 MT9V111 MT9M111 MT9D111

    iSensor App Kit 可以调试测试一切常规的sensor,对于ccusb20底板,可以直接兼容官哥所有的dvp接口的摄像头,分辨率从30w到1400w均没问题. 今天又测试了三款sensor ...

  3. 基于STM32 HID 游戏手柄开发调试

    stm32自带usb接口,非常适合做hid设备,免驱开发也很方便. 使用stm32通过正确的报告描述符配置后,插入usb,电脑正确识别如下(设备和打印机) 可以通过右键,游戏控制器设置 通过选择属性 ...

  4. robotframework配置邮箱服务器

    1.登录邮箱以腾讯企业邮箱为例:开启smtp服务并获得邮箱的客户端授权码 用户名:18890260218@163.com 客户端授权码:admin123 2.进入系统管理-->GO to plu ...

  5. 9月最新184道阿里、百度、腾讯、头条Java面试题合集

    阿里面试题 1. 如何实现一个高效的单向链表逆序输出? 2. 已知sqrt(2)约等于1.414,要求不用数学库,求sqrt(2)精确到小数点后10位 3. 给定一个二叉搜索树(BST),找到树中第 ...

  6. MySQL创建数据表时设定引擎MyISAM/InnoDB

    我在配置mysql时将配置文件中的默认存储引擎设定为了InnoDB.今天查看了MyISAM与InnoDB的区别,在该文中的第七条"MyISAM支持GIS数据,InnoDB不支持.即MyISA ...

  7. 基于TCP协议之SSH

    #SSH客户端 import socket # 1. 创建符合TCp协议的手机 client = socket.socket(socket.AF_INET,socket.SOCK_STREAM) # ...

  8. 2019 The Preliminary Contest for ICPC China Nanchang National Invitational（A 、H 、I 、K 、M）

    A. PERFECT NUMBER PROBLEM 题目链接:https://nanti.jisuanke.com/t/38220 题意: 输出前五个完美数 分析: 签到.直接百度完美数输出即可 #i ...

  9. vue之新手使用

    vue中文网站:https://cn.vuejs.org/v2/guide/installation.html  包含了安装.使用.api.视频. 一. 什么是 Vue Vue 是一个前端框架,特点是 ...

  10. PHP中抽象类和接口的区别

    抽象类 抽象类无法被实例化,它的作用是为所有继承自它的类定义(或部分实现)接口. 使用 abstract 关键字定义抽象类. 可以像在普通类中那样在抽象类中创建方法和属性,在大多数情况下,一个抽象类至 ...