<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. linux第四周

    一.知识点总结 (一)用户态.内核态和中断 1.内核态:在高的执行级别下,代码可以执行特权指令,访问任意的物理地址,这时的CPU就对应内核态 2.用户态:在低级别的指令状态下,代码 只能在级别允许的特 ...

  2. 爬虫框架Scrapy之Settings

    Settings Scrapy设置(settings)提供了定制Scrapy组件的方法.可以控制包括核心(core),插件(extension),pipeline及spider组件.比如 设置Json ...

  3. Android显示框架:自定义View实践之绘制篇

    文章目录 一 View 二 Paint 2.1 颜色处理 2.2 文字处理 2.3 特殊处理 三 Canvas 3.1 界面绘制 3.2 范围裁切 3.3 集合变换 四 Path 4.1 添加图形 4 ...

  4. spark streaming之 windowDuration、slideDuration、batchDuration​

    spark streaming 不同于sotm,是一种准实时处理系统.storm 中,把批处理看错是时间教程的实时处理.而在spark streaming中,则反过来,把实时处理看作为时间极小的批处理 ...

  5. fstat

    相关函数:stat, lstat, chmod, chown, readlink, utime 头文件:#include <sys/stat.h> #include <unistd. ...

  6. mysql外键理解

    一个班级的学生个人信息表: 什么是外键 在设计的时候,就给表1加入一个外键,这个外键就是表2中的学号字段,那么这样表1就是主表,表2就是子表. 外键用来干什么 为了一张表记录的数据不要太过冗余. 这和 ...

  7. kotlin for android----------MVP模式下(OKHttp和 Retrofit+RxJava)网络请求的两种实现方式

    今天要说的干货是:以Kotlin,在MVP模式下(OKHttp和 Retrofit+RxJava)网络请求两种实现方式的一个小案例,希望对大家有所帮助,效果图: Retrofit是Square公司开发 ...

  8. 明明白白AOP

    引子: AOP(面向方面编程:Aspect Oriented Programing)和IoC一样是Spring容器的内核,声明式事务的功能在此基础上开花结果.但是AOP和OOP差别较大,要很好地理解这 ...

  9. 第五天 Linux基本命令

    tty控制台终端  tty1~tty6? ctrl + alt + F2~F6  切换控制台 alt + F1 返回 但是使用 在图形化界面,使用init 3后,不能使用alt + F1返回,因为两者 ...

  10. POJ 1160 经典区间dp/四边形优化

    链接http://poj.org/problem?id=1160 很好的一个题,涉及到了以前老师说过的一个题目,可惜没往那上面想. 题意,给出N个城镇的地址,他们在一条直线上,现在要选择P个城镇建立邮 ...