Vue使用html2canvas将页面转化为图片

工具：

官网入口

一、下载

npm install --save html2canvas

二、使用

<template><div><div id="myH5">这里就随便写内容了</div><button @click="saveImg('myH5')">合 成</button></div>
</template>
<script>
import html2canvas from "html2canvas"
export default {data() { },methods: {// val传入需要转换的dom的idsaveImg(val) {window.pageYoffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;// 先获取你要转换为img的dom节点var node = document.getElementById(val);//传入的id名称var width = node.offsetWidth; //dom宽var height = node.offsetHeight; //dom高var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点html2canvas(node, {width: width,heigth: height,backgroundColor: "#ffffff", //背景颜色 为null是透明dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素scale: scale,X: 0,Y: 0,scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多scrollY: 0,useCORS: true, //是否使用CORS从服务器加载图像 !!!allowTaint: true //是否允许跨域图像污染画布  !!!}).then(canvas => {// console.log("canvas", canvas);var url = canvas.toDataURL(); //这里上面不设值cors会报错var a = document.createElement("a");//创建一个a标签 用来下载a.download = "图片名称"; //设置下载的图片名称var event = new MouseEvent("click");//增加一个点击事件a.href = url;//此处的url为base64格式的图片资源a.dispatchEvent(event); //触发a的单击事件 即可完成下载});},}
}
</script>

Vue使用html2canvas将Dom转化为图片相关推荐

python html转图片失真_html dom 转化成图片踩坑记（canvas toDataURL）
需求在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...
vue 项目 html2canvas,JSZip,FileSaver 下载图片
将html里面的dom转化为图片 <template><div class="m-item" ref="imageTofile">... ...
vue使用 html2canvas 导出页面，及将图片转成 pdf 格式
1. 下载 html2canvas,下载 jsPDF vue引入的形式 npm install --save html2canvas npm i jspdf --save 在vue文件中使用,这样前期 ...
domtoimage -- html转化为图片
html转化为图片前言这段时间的工作中,一直在做canvas类的H5,开发的过程中很关键的一部分是将dom节点转化为图片.起初是用html2canvas来做的,做完之后感觉图片清晰度的效果不是很好 ...
如何通过canvas 把页面代码转化为图片
今天分享下"如何通过canvas 把页面代码转化为图片"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一 ...
vue 调用微信分享接口分享截图图片
vue 调用微信分享接口分享截图图片现在好多应用都需要分享图片等等的需求 . 大体需要这几个步骤获取分享图片将 ...
vue xunidom_vue的虚拟dom（Virtual DOM ）
模板转换成视图的过程在底层实现中Vue会将模板编译成渲染函数,当然我们也可以不写模板,直接写渲染函数,以获得更好的控制. 渲染函数:渲染函数是用来生成Virtual DOM的: VNode虚拟节点: ...
Vue中的虚拟DOM
文章目录一.什么是虚拟DOM 二.虚拟DOM的作用提高性能三.通过模板转换成视图来理解一.什么是虚拟DOM 我们都知道DOM是什么,它是实实在在的被渲染在页面上的,我们平时的操作都和DOM息息 ...
Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹
Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹前言一.Vue 前端一.五注意!!! 二.Springboot 后端引入Base64依赖在项目里新建 ut ...

Vue使用html2canvas将Dom转化为图片

Vue使用html2canvas将页面转化为图片

工具：

一、下载

二、使用

Vue使用html2canvas将Dom转化为图片相关推荐

最新文章

热门文章