<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. HDU 1698 just a hook - 带有lazy标记的线段树(用结构体实现)

    2017-08-30 18:54:40 writer:pprp 可以跟上一篇博客做个对比, 这种实现不是很好理解,上一篇比较好理解,但是感觉有的地方不够严密 代码如下: /* @theme:segme ...

  2. spring boot2.1读取 apollo 配置中心3

    上篇记录了springboot读取apollo的配置信息,以及如何获取服务端的推送更新配置. 接下来记录一下,如何获取公共namespace的配置. 上文中使用如下代码共聚公共命名空间的配置: @Ap ...

  3. angular js实现开关效果

    功能:实现点击排序,再点击排倒序. 实现方法如下 方法一:定义变量实现点击切换true或false,代码为:  $scope.lidata = [                {"name ...

  4. Python基础笔记系列八:字符串的运算和相关函数

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 字符串的运算1.字符串的加法和乘法 python中不但支持字符串相加,还支 ...

  5. nignx的master进程和worker进程的作用

    ngnix进程启动启动后会有一个master进程和多个worker进程. master进程的主要作用: 1.读取并验证配置信息: 2.创建,绑定及关闭套接字: 3.启动,终止worker进程以及维护w ...

  6. 利用Java.util.UUID来生成唯一ID(用来做数据库主键好用)

    UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.按照开放软件基金会(OSF)制定的标准计算, ...

  7. 转载:Chrome 控制台不完全指南

    Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「 ...

  8. 使用ASP.NET 的缓存机制的示例

    if (HttpContext.Current.Cache["code_" + CodeType] == null) { SysCodeService codeService = ...

  9. sqlserver数据库标注为可疑的解决办法

    前几天客户那边的服务器死机了,然后客户强制关机,重新启动服务器后,系统就没法正常使用,连接不上服务器,我远程操作后,看到数据库标注为可疑,由于客户之前没备份数据库,看来只能是修复了: 1:停止数据库服 ...

  10. 用Qt写了一个qq客户端,采用webqq协议,发出来和大家分享一下---大神请无视

    首先做以下声明: 本程序基于腾讯公司的webqq协议开发,所有相关版权归腾讯公司所有.此程序只用于技术交流和学习,不得用于其他方面. ---开发者:雨后星辰,转载请注明出处:http://www.cn ...