<template><div><!--<input type="button" id="btnsavaImg" value="检测" @click="check()"/>--><input type="button"  value="检测" @click="check()" style="width: 50px;height: 30px;background-color: red;color: white"/><img src="~static/casino_s.png" id="btnsavaImg" alt=""><hr size="10"><div id="imgBox" style="margin-top: 100px"></div></div></template>
<script>//    npm install html2canvasimport html2canvas from 'html2canvas';export default {data () {return {}},methods:{check(){html2canvas(document.querySelector("#btnsavaImg")).then(function(canvas) {document.querySelector('#imgBox').appendChild(canvas);});}},mounted () {$loading.hide();}}</script>

https://html2canvas.hertzen.com/

转载于:https://www.cnblogs.com/web-fusheng/p/8687004.html

html2canvas 截屏 兼容手机端相关推荐

  1. php html5手机端多张图片上传,php+html5兼容手机端的图片选取裁剪上传实例

    网上大多图片上传插件都不带裁剪功能,这个是php+html5实现的兼容手机端的图片选取裁剪上传实例,分享出来希望能帮到大家. 首先放置一个上传按钮及相关预览信息等 注意:上传前,先截图 文件大小 类型 ...

  2. 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  3. PHPCMS V9 实现下拉加载的方法,兼容手机端(附源码下载)

    PHPCMS V9 实现下拉加载的方法,兼容手机端 HTML部分 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  4. html5实现安卓的手写功能,html5 canvas手写字代码(兼容手机端)(示例代码)

    html5 canvas手写字代码(兼容手机端) 画板实验 清 空 生成图片 var canvas,board,img; canvas = document.getElementById('myCan ...

  5. android 全屏广告,手机端全屏广告展示问题

    我最近在做一个手机端展示全屏广告的demo,广告素材的尺寸是320x480,是标准的全屏尺寸.我在屏幕小一点的手机可以全屏显示图片,但是针对一些大的屏幕就会最下面有一段是空白的.我想问下怎么设置可以让 ...

  6. html5多屏互动游戏,多屏互动 —— 手机端与PC端 网页互动的现有尝试及设想

    不可否认,多屏时代已经到来. 手机/平板/笔记本/PC/TV等,多个显示平台的逐步构建,为信息传播及交互提供了多重平台及体验选择. 素材:多屏自适应网页设计/多屏延生设计 在此篇文章,取手机端与PC端 ...

  7. 手机计算器代码php代码,用JS写一个计算器(兼容手机端)(示例代码)

    先看成果: 1.PC端 2. 首先确立html,有哪些东西我们要知道.布局大概的样子在心里有个数 瑞雪的计算器LRXtemmo 清空 撤回 9 8 7 6 5 4 3 2 1 0 . + - * / ...

  8. html2canvas截屏、绘制透明图片 .png

    html2canvas(content, { useCORS: true, //允许跨域 width: width, //dom 原始宽度 height: height, scale: scale, ...

  9. html2canvas文字重叠(手机端)

    发现情况: 1.设置文字居中,文字自动换行后文字有重叠   text-align: center; 解决办法: text-align: left; text-align: justify;等 2.使用 ...

最新文章

  1. jquery中如何以逗号分割字符串_百度知道
  2. 实验三 循环结构设计
  3. 【转载】Hadoop 2.7.3 和Hbase 1.2.4安装教程
  4. installation of igraph for python2.7
  5. Centos 6.0/ Nginx 安装与配置
  6. 培训是一种乐趣(3)
  7. 在 Java OOP 编程中的注意事项
  8. Codeforces 773D Perishable Roads 最短路 (看题解)
  9. 编译原理语法分析_斯坦福大学《编译原理》学习记录 - 第二章:语法分析器
  10. NYOJ-+-字符串(贪心)
  11. 8-7/8 java/redis 客服端
  12. ERROR: invalid byte sequence for encoding UTF8: 0xe5 0xb7 CONTEXT: COPY news_article, line 32973
  13. 试题18 四平方和(枚举法)
  14. Codeforces - 102222H - Fight Against Monsters - 贪心
  15. 图解冰河木马一次使用过程
  16. 怎么提高公文写作水平?原来这就是公文写作通知类模板
  17. Python微信库:itchat的用法详解
  18. 肿瘤外显子数据分析指南 复现
  19. 计算机内部的单位换算(内存)byte B KB MB GB TB
  20. Pandas是什么?Pandas库下载和安装!

热门文章

  1. Java并发编程之线程池中的Future
  2. Flash发布iOS应用全攻略(二)——如何成为一个合法的iOS开发者
  3. Unity界面插件NGUI基础教程
  4. MySQL数据类型不一致_数据类型不一致导致的SQL不走索引
  5. 上海地图全图可放大_好书·推荐丨第一次将近代上海行号与地图合并在路图中,你知道是哪本书吗?...
  6. java求根号函数_一般实系数四次方程的一种求根公式与根的判别法则及其推导...
  7. matlab 转 python_985工科硕士自学转程序员经验
  8. 迟思堂工作室编程规范:单片机C语言
  9. 【算法】java 用 数组 模拟 队列
  10. 01-BIO通讯模型