vue 页面保存为本地图片

需求：将整个页面转化为图片，或者将部分转化为图片

解决方案：

1.引入html2canvas

npm install --save html2canvas 或者：yarn add html2canvas

2.将html2canvas 引入到组件中，vant 的组件 ImagePreview 引入
该插件安装完毕后，在你需要使用的vue组件中，按照以下方式，将插件引入：

import html2canvas from "html2canvas"import {ImagePreview} from 'vant';

3.将制定区域内转成图片
首先，你需要让html2canvas获取到你想要转换的节点内容，因此，你需要添加ref标记。
示例如下：

    <div class="container" ref="imageDom"><div>截取的内容</div></div>

imageDom需要是你想转换的页面内容的父容器，即你想转换的页面内容需要全部包含在imageDom节点内。
转换方法如下：

 /**将页面指定节点内容转为图片*/
onClickRight() {html2canvas(this.$refs.imageDom).then(canvas => {// 转成图片，生成图片地址this.imgUrl = canvas.toDataURL("image/png");//赋值给vant组件直接显示ImagePreview([this.imgUrl ]);});},

问题1：微信浏览器不能直接下载生成后的图片。
在chrome等浏览器下可以使用如下方法，将生成的图片直接下载下来：

// 创建隐藏的可下载链接var eleLink = document.createElement("a");eleLink.href = imgUrl; // 转换后的图片地址eleLink.download = "pictureName";// 触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);

效果：

vue 页面保存为本地图片相关推荐

UE4 如何将TextureRenderTarget2D保存为本地图片
昨日不可追, 今日尤可为.勤奋,炽诚,不忘初心 UE4 如何将TextureRenderTarget2D保存为本地图片如果想要将材质保存为本地Png,请点这里: UE4 如何将材质Material保 ...
UE4 如何将材质Material保存为本地图片Png
昨日不可追, 今日尤可为.勤奋,炽诚,不忘初心 UE4 如何将材质Material保存为本地图片Png 下面这篇文章讲了如何将TextureRenderTarget2D保存为本地图片 https:// ...
vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png' ...
canvas保存到本地图片三种方法
canvas保存到本地图片三种方法 canvas保存本地图片第一种方法(修改图片的媒体类型,window.open直接下载) 第二种方法(创建a标签,通过自己触发点击来下载) 第三种方法(将图片数据 ...
WEB自动化（4）使用selenium将网站验证码截图保存为本地图片
WEB自动化(1)环境安装及打开浏览器实例 WEB自动化(2)常用的元素定位方法之xpath详解 WEB自动化(3)PO设计模式原理与实现 WEB自动化(4)使用selenium将网站验证码截图保存为 ...
vue使用v-for遍历本地图片不显示
vue使用v-for遍历本地图片不显示的问题 1.项目中本地有一组图片需要循环遍历展示,在使用v-for遍历之后发现无法展示图片,解决方法如下. 2.首先,正常的图片路径如下,但是想要展示不能按正常的 ...
【Uni-App】点击分享，生成海报带二维码，保存到本地图片，写入文字
目录一:需求二:分析三:准备工作 1.qrcode准备 2.并且在main.js去挂载四:页面构建 1.html 2.data 3.js 二维码嵌入文字一:需求 1.产品需要这个商品,必须分 ...
vue导入及使用本地图片
MSite.vue导入本地图片图片所在位置: 1.直接使用 <template><img src="./image/1.jpg"/> </tempa ...
三种保存电脑本地图片方法
1这是我最开始存储图片到项目获取地址的方法用下面这个方法去获取我想要存地址结果很不理想,每次获取的是target下的目录,(ps:我用的是idea 发布用的是exploded包,不知道和这个有关系没) ...
vue如何动态渲染本地图片img
动态渲染本地图片 <div class="wrap_left" v-for="item of array" :key="item.id" ...

vue 页面保存为本地图片

vue 页面保存为本地图片相关推荐

最新文章

热门文章