html2canvas 截屏 兼容手机端

<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" >
        <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/

原文地址:https://www.cnblogs.com/web-fusheng/p/8687004.html

时间: 2024-10-30 06:54:41

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

html2canvas截屏后上传到服务器端(springmvc3)

利用html2canvas截屏后可以生成base64类型的图片,但是这样的图片很明显不能被引用或者被SNS工具来分享.这样就必须截屏后再上传数据到后台服务器端重新保存. 前端js代码: $("#saveImage").click(function() {html2canvas($('#mypics'), {onrendered : function(canvas) {var myImage = canvas.toDataURL("image/jpeg");//并将图

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

前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

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

先看成果:1.PC端2. 首先确立html,有哪些东西我们要知道.布局大概的样子在心里有个数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>瑞雪的计算器</t

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

1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候像分析本地的一样简单.这就是我的理解.官网给出的只有php的方法,我是照扒了一般java的出来.有写的不好的地方,欢迎大家指正.废话不多说了,先上代码. @RequestMapping(value="/proxy", method = RequestMethod.GET) public v

html2canvas截屏用法

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i

使用html2canvas截屏,利用itextpdf转为pdf保存到数据库

项目里的一个需求,需要将html转为pdf保存到远程FTP服务器和数据库 解决方案:使用html2canvas截取页面元素,类似截图的效果,再利用itextpdf转为pdf保存到数据库. 优点:支持中文(也想过使用其他的插件,如jsPDF等插件,可是不支持中文,可惜了):容易上手 缺点:html2canvas截图的缺点就是,不够清晰,这点不是很满意: html2canvas 这个就不上教程了,官网很多. 主要是这里碰到一个问题,值得分享一下:如何保存到远程FTP服务器和数据库 (1)使用html

兼容手机端页面

(function(){var iScale = 1;iScale = iScale / window.devicePixelRatio;document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + 1 + ',minimum-scale=' + 1 + ',maximum-scale=' + 1 + '">')va

html2canvas文字重叠(手机端)

发现情况: 1.设置文字居中,文字自动换行后文字有重叠   text-align: center; 解决办法: text-align: left; text-align: justify;等 2.使用了" /" 分开语句."/"可能与后面的字重叠 解决办法: 使用全角来编写"/"试试 原文地址:https://www.cnblogs.com/sgqwjr/p/10071871.html

解决clipboard手机端无法复制的一种思路

最近,做了一个切图的小项目 主要内容是微信号的推广页面,上面会有精美的图片和微信号:) 点击按钮,会复制到粘贴板上,自己去微信里面粘贴搜索:),懒人会进行一系列复杂操作么,不看好 首先,百度了一下,看中clipboard库,纯js兼容手机端,好激动:) clibboard的GitHub地址,使用非常简单,自己看demo目录的内容,源码看的方,还是不知道如何实现的,求教 主要思路,就点击按钮,自动将文本复制到剪贴板. 选择使用其中的function,可以使用ajax从服务端获取微信号 官网的方案