<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 html2canvas
import 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/

html2canvas 截屏 兼容手机端的更多相关文章

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

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

  2. html5 canvas手写字代码(兼容手机端)

    html5 canvas手写字代码(兼容手机端) <pre><!DOCTYPE html><html><head> <title>画板实验& ...

  3. html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

    1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...

  4. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  5. 用JS写一个计算器(兼容手机端)

    先看成果:1.PC端2. 首先确立html,有哪些东西我们要知道.布局大概的样子在心里有个数 <!DOCTYPE html> <html> <head> <m ...

  6. java使用代理 html2canvas 截屏 将页面内容生成图片

    1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...

  7. html2canvas截屏用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  8. Asp.net窄屏页面 手机端新闻列表

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchNotice.a ...

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

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

随机推荐

  1. ScriptToApp FAQ

      Q: What should i do when the system alert is displayed ? A: To make the generated app work, you ne ...

  2. ubuntu 18.04在更新软件库时出现E: Release file for http://security.ubuntu.com/ubuntu/dists/bionic-security/InRelease is not valid yet...

    1.完整的错误信息如下: E: Release file for http://security.ubuntu.com/ubuntu/dists/bionic-security/InRelease i ...

  3. RMI远程方法调用

    RMI远程方法调用:适用于 客户端 调用 服务器 内的方法:(Kotlin 语言编写) 如果业务为二个服务器之间的通信,还是得用消息队列的形式,因为RMI 不适合 双向 调用 下面介绍RMI 的使用方 ...

  4. HDU 3861 The King's Problem(强连通分量缩点+最小路径覆盖)

    http://acm.hdu.edu.cn/showproblem.php?pid=3861 题意: 国王要对n个城市进行规划,将这些城市分成若干个城市,强连通的城市必须处于一个州,另外一个州内的任意 ...

  5. 直播P2P技术2-低延迟模型

    低延迟模型 由上一篇文章我们知道:网状拓扑虽最大化利用了所有节点的资源却无法降低数据延迟,而树状拓扑尽管数据传输效率高,延迟低,但只利用了少部分节点的带宽资源,不适应高码率的直播P2P网络. 那么如何 ...

  6. input输入框延时发送请求问题

    同样是面试遇到的问题,input输入框,怎么减少发送请求次数. 键盘抬起触发事件,首先清除定时器,再开启定时器.只要小于1s的连续输入,都会先把上一次定时器清除.停顿一秒后,开始执行请求事件(此处为c ...

  7. MySQL MVVC

    什么是MVVC? MVVC (Multi-Version Concurrency Control) (注:与MVCC相对的,是基于锁的并发控制,Lock-Based Concurrency Contr ...

  8. 永久以管理员身份运行cmd

    系统:win7 1,下图输入 cmd,找到cmd 2,发送到桌面快捷方式 3,在桌面上的cmd,右键,属性 点高级,进入后,勾上 管理员.

  9. atom的初次尝试,activate-power-mode 插件和做gif

    编辑器是github 和sublime 的综合,作为一个经常逛github的人,还很喜欢sublime的开发,还有什么好不尝试的理由呢. 好吧,我承认,编辑器有很多,但是像它那样炫酷的很少,作为喜欢一 ...

  10. 《深入理解mybatis原理2》 Mybatis初始化机制详解

    <深入理解mybatis原理> Mybatis初始化机制详解 对于任何框架而言,在使用前都要进行一系列的初始化,MyBatis也不例外.本章将通过以下几点详细介绍MyBatis的初始化过程 ...