vue中实现生成海报图片html2canvas详细教程

该插件详细配置文档地址建议谷歌浏览器打开，因为翻译的比较准确
实现效果如图所示

1.安装插件 npm install --save html2canvas
2.将要生成图片的区域用大的元素包裹起来例如

代码如下
注意如果图片是通过接口来获取的，一定要后台配置一下nginx这个东西，本人在这里踩了坑的配置如下

location / {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET,POST';alias /home/html/;}

html代码

<div class="poster-menu">//这里是要生成图片的区域<div class="poster-aside" id="poster-aside"><img :src="imgUrl+''+promotionBackgroundUrl" class="img1" >//这个是绘制的二维码图片<canvas  id="canvas" class="img2">二维码位置</canvas ></div><div class="poster-desc"><img src="../../../assets/images/poster-desc-icon.png" alt="" ><p class="poster-lj" v-clipboard:copy="paymentAddress" v-clipboard:success="copy" v-if="tuiguanma">推广链接:{{paymentAddress}}  </p><p class="poster-tg" v-if="tuiguanma">推广码:{{tuiguanma}}</p><router-link to="/microcosm/extension" v-else class="poster-tg" >您还未成为推广大使，请点击前往</router-link><div class="poster-invite">邀请好友成为推广大使吧！</div><!--href="" download="microClub" --><a class="poster-download"  @click="downloadCodeImg">下载</a></div>
</div>

js代码
一定要在mounted的生命周期函数中执行一次downloadCodeImg()这个方法，不然点击按钮下载的时候要点击两次才能下载图片

data () {return {promotionBackgroundUrl:'',//推广背景图imgUrl:this.imgUrls,//图片前缀；我这里是在全局配置的图片前缀，如果后台返回的是完整的路径，这个没有用}
},
created () {this.getPromotionBackground() //获取图片地址
},
mounted () {因为图片是通过接口获取的，页面加载前图片可能还没有获取过来setTimeout(()=>{this.downloadCodeImg()},500)
},
//生成图片
methods:{downloadCodeImg(){let button= document.querySelector(".poster-download"); //下载按钮const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度const width=document.querySelector(".poster-aside").offsetWidthconst height=document.querySelector(".poster-aside").offsetHeight +30//包裹容器的高度html2canvas(document.querySelector(".poster-aside"), {width, //画布的宽度，即生成图片的宽度height,//画布的宽度，同上scrollY: -scrollTop+15, //生成的图片在画布上的偏移量，我这里加15的原因是让图片上下居中dpi: window.devicePixelRatio*2 , // 对应屏幕的dpi，适配高清屏，解决canvas模糊问题scale: 1, // 缩放useCORS: true, // 是否使用图片跨域，如何使本地图片不用配置}).then(canvas =>{// canvas参数为生成的canvas的dom节点，可以对其进行dom操作// 下载功能// 设置a标签的download属性，点击a标签变为下载button.download = '邀请图' // 设置下载的文件名button.href = canvas.toDataURL("image/png");; // a标签的url对应图片base64});},//推广背景图getPromotionBackground(){//这里通过接口获取背景图片imageApi.promotionBackground().then(res=>{this.promotionBackgroundUrl=res.data})}},

vue中实现生成海报图片html2canvas详细教程相关推荐

uniapp中自定义生成海报图片
uniapp中自定义生成海报图片效果示例图效果示例图 ##代码块 <template><view class="cardPoster-wrap">< ...
vue render生成html,在vue中如何渲染函数render（详细教程）
本篇文章主要介绍了vue渲染函数render的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.什么是render函数? vue通过 template 来创建你的 ...
php html生成海报jpg,html2canvas 生成海报
应用场景移动端H5 分享海报安装html2canvas 插件 npm install --save html2canvas Vue中使用 // 在Vue页面中引入 import html2canv ...
html生成海报图片
html生成海报图片效果图(源码下载地址在文章底部) html源码: 需要引入的js文件: 手机在线演示: 源码下载:https://xson.cc/?page=1 效果图(源码下载地址在文章底部) ...
Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性
Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性鼠标悬停时:@mouseenter 鼠标离开时:@mouseleave 利用以上来绑定相应方法,例如: <div @mouseleav ...
VUE 中通过v-bind:src 图片不显示问题
VUE 中通过v-bind:src 图片不显示问题,引入图片的方式用require 即可 html: <img v-bind:src='imgUrl'> js:imgUrl:requir ...
【源码+图片素材+详细教程】Java游戏开发_Java开发经典游戏飞翔的小鸟_飞扬的小鸟_Java游戏项目Flappy Bird像素鸟游戏_Java课程设计项目
课程目标: 1.通过本课程的学习巩固Java的相关基础知识,例如循环判断,数组和集合的使用,对象的继承,接口的实现,窗口的创建,事件监听,图形绘制. 2.完成小鸟的移动,管道自动生成.碰撞死亡,计分系 ...
word2003如何设置护眼模式_在word中开启保护眼睛模式的详细教程
导读: 今天小编给大家讲解在word中开启保护眼睛模式的详细教程,有需要或者有兴趣的朋友们可以看一看下文,相信对大家会有所帮助的. 今天小编给大家讲解在word中开启保护眼睛模式的详细教程,有需要或者 ...
前端生成海报图片（html2canvas偏移坑）
好久没写博客了,今天必须立刻马上现在写一个,记录一下悲惨的两天进坑旅程! 业务需求: 大佬要求前端生成一个海报图片,用户在微信内长按图片可以进行分享,并且海报内要有分享二维码. 嗯?前端生成海报?图片 ...

vue中实现生成海报图片html2canvas详细教程

vue中实现生成海报图片html2canvas详细教程相关推荐

最新文章

热门文章