<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. 解决 maven项目在eclipse中debug时看不到源码问题

    第一步: 第二步:Configurations 里面的source里面是Default.把Defaul删除,选java project ,然后添加自己的项目 第三步:选中,并用命令跑tomcat 这样 ...

  2. 解读:hadoop压缩格式

    Hadoop中用得比较多的4种压缩格式:lzo,gzip,snappy,bzip2.它们的优缺点和应用场景如下: 1). gzip压缩 优点:压缩率比较高,而且压缩/解压速度也比较快:hadoop本身 ...

  3. openwrt设置uboot环境变量在flash上的存储地址

    1.分析如下 ubootenv_add_app_config ubootenv_add_uci_config "/dev/mtd1" "0x40000" &qu ...

  4. 记jsp判断

    empty:表示空字符串,null,空数组,空集合. ! empty:表示非空字符串,非null,非空数组,非空集合.

  5. 秒懂算法3——插入排序(C#实现)

    算法思路: 将n个元素分成[已排序]和[未排序]两部分.每次将[未排序]中的一个元素取出,插入到已排序中的相应位置.直至所有元素排序完毕. [已排序] [未排序] { { a[0] }         ...

  6. Maven的继承和聚合

    Maven的继承和聚合子项目的pom文件里通过<parent>节点来继承父项目 <parent> <groupId>com.tykj</groupId> ...

  7. invocationCount和invocationTimeOut

    这篇我们来学习下@Test中另外两个属性invocationCount和invocationTimeOut,前面我介绍了timOut这个属性,知道是超时监控的功能.同样,本篇两个属性和这个差不多,只不 ...

  8. CSS元素隐藏的11种方法

    { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; cl ...

  9. 前端构建大法 Gulp 系列

    参考: 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp ...

  10. jQuery 获取Select选择的Text和 Value

    jQuery获取Select选择的Text和Value:语法解释:    1. $("#select_id").change(function(){//code...});   / ...