vue html2canvas安装,vue中html2canvas的使用

html2canvas：将dom元素转为一张图片

1，装包： npm install --save html2canvas

2，导入： import html2canvas from 'html2canvas';

3，如果该盒子里面有从后台请求回来的图片路径可能会存在图片跨域情况

img标签里加上 crossorigin='anonymous'

html2canvas方法里加上useCORS: true,

如果再不行就在图片路径后面加个时间戳：url+'?time='+new Date().valueOf()

```

toImage() {

window.pageYOffset = 0

document.documentElement.scrollTop = 0

document.body.scrollTop = 0

html2canvas(this.$refs.qrcode,{

useCORS:true,

windowWidth: document.body.scrollWidth,

windowHeight: document.body.scrollHeight,

x: document.getElementById('qrcode').offsetLeft,

y: document.getElementById('qrcode').offsetTop,

scale: 2,

}).then(canvas => {

let dataURL = canvas.toDataURL("image/png");

this.imgUrl = dataURL;

if(this.imgUrl) {

this.show =true

this.loading.close();

}

}).catch(err => {

this.loading.close();

});

```

4， html2canvas(要转成图片的元素，对象-最终图片的属性)

useCORS：表示允许跨域

windowWidth,windowHeight,x,y, 是解决最终图片顶部或底部的空白区域

5， scale -- 清晰度

vue html2canvas安装,vue中html2canvas的使用相关推荐

yarn全局安装vue/cli vue不是内部命令
yarn全局安装vue/cli vue不是内部命令在使用 yarn global add @vue/cli安装 @vue/cli之后执行vue --version 报错:'vue' 不是内部或外部 ...
Vue脚手架安装与 Vue项目创建运行、vue项目迁移后运行失败问题
目录 Vue脚手架安装 vue 如何查看vue cli的安装位置 Vue项目创建与运行 1.创建项目 2.运行项目 3.检测运行是否成功项目文件作用介绍快捷安装项目所需依赖命令 npm i Vu ...
1. Windows 10 - Node与Vue - 安装 Vue 2.x 及 3.x 框架 - 项目创建要点
目录前言一.vue 简介: 1.npm简介 2.cnpm 简介二.设置node的全局和缓存路径手动创建node.js的全局和缓存路径目录 Windows命令行配置node.js的全局和缓存路径 ...
vue脚手架安装以及vue脚手架创建项目（详细步骤）
系列文章: 文章目录 node.js安装 vue环境安装 vue创建项目命令行方式创建使用UI界面搭建 idea导入vue项目学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端 ...
Vue中Html2canvas生成网页局部截图
Html2canvas文档地址 npm安装Html2canvas npm install --save html2canvas 项目文件引入Html2canvas(在哪使用就引入到哪) import ...
vue html2canvas用法,vue中html2canvas的使用（地图截图）
1,下载html2canvas插件 npm install --save html2canvas 2,引入html2canvas import html2canvas from 'html2canva ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
安装VUE过程中出现的4048错误
闭坑指南:安装VUE过程中出现的4048错误我也是试过了好多提供的解决方案,但还是这个最有效第一步打开node.js文件中手动创建的两个文件(node_cache和node_global),右键 ...
Idea中Vue的安装和使用
一.准备工作 Vue是前端开发框架.搭建框架,首先要搭建环境.搭建Vue的环境工具:node.js(JavaScript的运行环境),然后再用nodejs里面的npm(包管理和分发工具)来安装依赖包. ...

vue html2canvas安装,vue中html2canvas的使用

vue html2canvas安装,vue中html2canvas的使用相关推荐

最新文章

热门文章