使用的工具是：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. 分布式监控数据采集系统Ganglia实战

    一.什么是Ganglia 对于这个工具,大家可能比较陌生,但是它功能非常强大,如果我们想收集所有服务器.网络设备的数据,那么ganglia绝对是首选,在深入学习之前,还是先从基础概念了解起吧! Gan ...

  2. 【React】377- 实现 React 中的状态自动保存

    点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...

  3. H5 app在真机调试的时候正常,打包成app后报错

    在自己的一个用h5开发的项目中, 环境 IDE HBuilderX 打包工具 Hbuilder线上打包 开发语言 JS 现象 从一个列表进入详细页之后一直转圈圈.因为是调用系统原生的等待组件,界面无法 ...

  4. 从头实现一个WPF条形图

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  5. 转自自己的关于落谷计数器【p1239】的题解

    本蒟蒻写这道题用了两天半里大概五六个小时.(我太弱了) 然后这篇题解将写写我经历的沟沟坎坎,详细的分析一下, 但是由于它很长,因此一定还有多余的地方,比如说我的 预处理,可能比较多余.但是我觉得,信息 ...

  6. 完整开发流程管理提升与系统需求分析过程 随堂笔记(day 1) 【2019/10/14】

    Top12原则: 主要资源,重要功能,依据需求重要度进行资源分配, 项目100功能 1 day -> 100Task -> 10 Dev 20% 80% 开发各阶段流程及规范   需求.架 ...

  7. MPV源码探究：背景及准备工作

    背景及准备工作 一点历史 古有魏蜀吴三分天下,今有 Mplayer.MPC.VLC 三分天下.这个世界观太庞大,忍不住先讲一点多媒体播放器的历史.实际上目前市面上的开源播放器主要基于三种技术栈: Mp ...

  8. php有必要用swoole吗

    在 Swoole 官网的自我介绍是“面向生产环境的 PHP 异步网络通信引擎”,首先 Swoole 它是一个网络应用的开发工具,它支持 Http.TCP.UDP.WebSocket. Swoole 和 ...

  9. IT兄弟连 HTML5教程 CSS3属性特效 渐变1

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  10. Idea中Maven的安装

    Maven 软件的下载 为了使用Maven 管理工具,我们首先要到官网去下载它的安装软件.通过百度搜索“Maven“, 点击Download 链接,就可以直接进入到Maven 软件的下载页面: 目前最 ...