vue项目中如何将当前页面生成图片
更新时间:2023年10月30日 08:50:08 作者:末日与曙光
这篇文章主要介绍了vue项目中如何将当前页面生成图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
闲着没事总结一下vue 项目中将当前页面生成图片,给各位看官做个参考。
安装所需依赖
npm install --save html2canvas // 页面转图片
详细代码
累了,毁灭吧,直接上代码,代码里的注释已经解释完了;
对了,这是移动端样式;
<template> <div class="ReservedSucceed"> <div id="ReservedSucceed" @click="imgBox=false"> <div class="content" v-for="item in strList" :key="item.label"> <p class="hide">{{item.str}}</p> </div> </div> <el-button type="primary" @click="imgBox=true" >网页生成图片</el-button> <div class="imgBox" v-show="imgBox"> <div class="img"> <img :src="fileId" alt=""> </div> <div class="box"> <a class="down" href download="图片名字">请长按保存图片</a> </div> </div> </div> </template>
<script> import html2canvas from 'html2canvas' export default { data() { return { fileId:"", imgurl: null, imgBox: false, strList:[ {str:"要永远坚信这一点:一切都会变的,无论受多大创伤心情多么沉重,一贫如洗也好,都要坚持住。太阳落了还会升起,不幸的日子总会有尽头,过去是这样,将来也是这样。早安!",label:"1"}, {str:"这是他的似水流年,不是我的。岁月如流,就如月在当空,照着我们每一个人,但是每个人的生活都不一样。",label:"2"}, {str:"流水是白云的影子,月亮是太阳的影子,黑夜是白天的影子,痛苦是爱的影子。不求你做我的影子,甘愿我做你的影子。",label:"3"}, {str:"花开一季,人活一世,只有时光安然无恙。那些转正确的弯,那些流下的泪水,那些滴下的汗水,不论好坏,终究成全了现在的自己。",label:"4"}, {str:"人生没有假设,当下即是全部。人生的幸与不幸,关键看你面向哪里。幸福如阳光,不幸是阴影,有阳光就必然有阴影。人生一边是永无止境的追求,一边是平淡如水的流年。不是每一次追求都能成功,不是每一次付出都有收获。",label:"5"}, {str:"在沧海桑田,我们就是那起舞的蝴蝶,无论今天怎样,明天我还会在这里,路过我曾经去过的地方,探索我未实现的未来,哪怕是蝴蝶飞不过沧海。",label:"6"}, {str:"从容来去,坦然今生。无论生命给了我们什么,是雨露的滋润,还是阳光的照射,是狂风的吹拂,还是暴雨的敲打,我们都从容地接受,欣然地释放着生命的繁丽。如果遇到的是伤痛,我们就要学会坚忍,并因此练就释怀生命起落的本能。如果遇到的是快乐,我们就幸福地绽开笑容,并把快乐传播。如果遇到的是黑夜,我们就和星星、月亮一起迎接每一个黎明的到来;如果遇到的是白昼,我们就尽情地去欣赏鲜花的绽放、鸟儿的歌唱、蝶儿的轻舞,去拥抱这个美丽而充满生机的世界。",label:"7"}, ] }; }, created() { }, mounted() { //将网页生成图片 this.htmlTocanvas(); }, methods: { //获取截图 getBase64(fileId) { this.fileId = fileId }, //页面生成图片(基础版) htmlTocanvas() { const that = this; html2canvas(document.getElementById("ReservedSucceed")).then( async function(canvas) { // 第一种方法,生成base64 // let str = canvas.toDataURL("image/png").split(",")[1]; that.getBase64(canvas.toDataURL("image/png")); // 第二种方法,直接下载 // canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载 // document // .querySelector(".down") // .setAttribute("href", canvas.toDataURL()); // 第三种方法,生成的图片的url // var imgurl = canvas // .toDataURL("image/png") // .replace("image/png", "image/octet-stream"); // 获取生成的图片的url // window.location.href = imgurl; // 下载图片 } ) }, //页面生成图片(进阶版) htmlTocanvas1() { //解决生成的网页图片不清晰------预防,暂未出现 const that = this; //创建一个新的canvas var canvas2 = document.createElement("canvas"); // let _canvas = document.querySelector('div'); let _canvas = document.getElementById("ReservedSucceed"); var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas).height); //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了 canvas2.width = w * 3; canvas2.height = h * 3; canvas2.style.width = w + "px"; canvas2.style.height = h + "px"; //可以按照自己的需求,对context的参数修改,translate指的是偏移量 // var context = canvas.getContext("2d"); // context.translate(0,0); var context = canvas2.getContext("2d"); html2canvas(document.getElementById("ReservedSucceed"), { canvas: canvas2 }).then(async function(canvas) { // 第一种方法,生成base64 // let str = canvas.toDataURL("image/png").split(",")[1]; that.getBase64(canvas.toDataURL("image/png")); // 第二种方法,直接下载 // canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载 // document // .querySelector(".down") // .setAttribute("href", canvas.toDataURL()); // 第三种方法,生成的图片的url // var imgurl = canvas // .toDataURL("image/png") // .replace("image/png", "image/octet-stream"); // 获取生成的图片的url // window.location.href = imgurl; // 下载图片 }); }, } } </script>
<style lang="scss" scoped> .ReservedSucceed { background-color: white; .hide { text-indent: 1em; } .imgBox { position: fixed; top: 15%; left: 25%; width: 50%; background-color: rgb(232, 236, 232); z-index: 2; border-radius: 20px; padding: 5px; .img { padding: 10px; img { width: 100%; } } .box { text-align: center; margin: 10px 0; } } } </style>
结果图
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
详解如何在Vue3使用<script lang=“ts“ setup>语法糖
本文主要介绍了在Vue3使用<script lang=“ts“ setup>语法糖,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-06-06Vue.js使用axios动态获取response里的data数据操作
这篇文章主要介绍了Vue.js使用axios动态获取response里的data数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论