使用的工具是：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. Docker--DockerFile创建自己的image

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 在我们 ...

  2. Asp.Net WebApi一个简单的Token验证

    1.前言: WebAPI主要开放数据给手机APP,Pad,其他需要得知数据的系统,或者软件应用.Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能.我上次写的<Asp.Net MV ...

  3. CookieUtils-浏览器缓存工具类

    package cn.yonyong.myproject.commons.utils; import javax.servlet.http.Cookie; import javax.servlet.h ...

  4. elementui入门

    1.前端服务器搭建 (1)创建一个static web project (2) 安装 npm install -g vue-cli (3) vue init webpack 项目名 (4)cd 项目名 ...

  5. JavaScript原型 补充

    js原型 // 构造函数 = 类 function A(){} let a1 = new A(); // 添加原型 num => 类似于属性 A.prototype.num = 100; con ...

  6. 前端day01

    目录 软件开发架构 web服务的本质 HTTP协议 HTML的注释 HTML的文档结构 标签的分类 标签的分类 列表标签 表格标签 软件开发架构 ​ c/s ​ b/s ​ b/s本质也是c/s ​ ...

  7. C#程序编写高质量代码改善的157个建议【10-12】[创建对象时需要考虑是否实现比较器、区别对待==和Equals]

    前言 建议10.创建对象时需要考虑是否实现比较器 建议11.区别对待==和Equals 建议12.重写Equals时也要重写GetHashCode 建议10.创建对象时需要考虑是否实现比较器 有对象的 ...

  8. EVERSPIN非易失性存储器具吸引力嵌入式技术

    相关研究指出,如果以嵌入式MRAM取代微控制器中的eFlash和SRAM,可节省高达90%的功耗:如果采用单一晶体管MRAM取代六个晶体管SRAM,则可实现更高的位元密度和更小的芯片尺寸,这些功率与面 ...

  9. GetPrivateProfileString() 当 key 包含空格时，需要进行转义

    使用 GetPrivateProfileString() 方法可以方便的读取 ini 格式文件中的内容,如: [section] tommy = worker 使用 C# 读取如下: 1. 先引入 G ...

  10. Pytorch 记录

    BCELoss BCEWithLogitsLoss 将sigmoid和BCELoss结合在一起,数据的稳定性更好. torch.nn.functional: binary_cross_entropy_ ...