<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. win64 Python下安装PIL出错解决2.7版本 (3.6版本可以使用)

    转自:http://blog.csdn.net/lhh31/article/details/51979293 1.软件版本 首先我先安装了 python 2.7 pip是  8.1.2 2.当我要安装 ...

  2. 起源游戏临时实体(Temp Entity)

    如何查看实体 https://wiki.alliedmods.net/Temp_Entity_Lists_(Source) 这里是部分游戏的临时实体列表 # 还可以通过在游戏内输入来获取游戏的临时实体 ...

  3. RN初始化环境快速配置

    1.安装node node是基于js的,node.js轻量级的Web服务器,想要是React Native跑起来需要node环境,可以去官网下载安装node.js 下载地址:https://nodej ...

  4. optind变量

    1.这个变量是在什么地方定义的? 答:系统定义的 2.这个变量在什么场景下使用? 答:在解析命令行参数时会用到 3.这个变量存在的意义? 在每调用一次getopt()或getopt_long()类似函 ...

  5. 商品详情页,banner滚动点击加载效果,js,jquary

    <script language="javascript">       $(document).ready(function () {   //purchase   ...

  6. UVA 1393 Highways(数学思想)

    题意:给你n.m(n,m<=200),问你有多少条非水平.非垂直的直线有多少条经过至少两个点 题解:我们需要枚举的是只画一条线的矩形,对于大小a*b的矩形必须保证gcd(a,b)=1才能不重复 ...

  7. Linux基础知识点

    1.目录结构 bin 存放二进制可执行文件(ls,cat,mkdir等) boot 存放用于系统引导时使用的各种文件 dev 用于存放设备文件 etc 存放系统配置文件 home 存放所有用户文件的根 ...

  8. JavaScript高级程序设计-读书笔记(7)

    第22章 高级技巧 1.高级函数 (1)安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串. ...

  9. Nordic官方网络资源介绍(官网/devzone/GitHub)

    本文将介绍Nordic官方网络资源,包括Nordic官网,开发者论坛(devzone),以及Nordic在GitHub上的共享资源. 1. Nordic官网(产品/SDK/工具/文档库) Nordic ...

  10. 【转】python操作mysql数据库

    python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库 ...