vue canvas画海报

安装:

npm install html2canvas --save
npm i qrcanvas --save

html:

       <div><!-- 设置了两个块区域 当点击了生成海报时把canvas转换成base64的图片，然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src--><img v-if="!test" :src="imgSrc"   alt /><div v-else>
//src图片可以替换成自己想要的图片<img src="~@/images/invitation/theme_icon.png" alt /><div id="qrcode"></div><div id="invitation">测试数据啊,使用id,只生成这个内容啊</div>  <button @click="btn">点我生成</button><button @click="btn">保存到本地</button></div></div>

js:

<script>
//生成一个二维码
import { qrcanvas } from "qrcanvas";
//将整个页面转换成canvas
import html2canvas from "html2canvas";export default {data() {return {test: true,imgSrc: ""};},methods: {
//生成邀请函btn() {//生成一个二维码 data是二维码跳转的地址（写自己需要跳转的地址即可）// const canvas = qrcanvas({//data: location.href   //});//document.getElementById("qrcode").appendChild(canvas);
//此上部分去掉则不会生成二维码//点击生成canvas转换成base64的图片this.$nextTick(() => {const that = this;
//document.body生成整个页面的内容document.getElementById('invitation')生成某个id为invitation的内容html2canvas(document.getElementById('invitation')).then(function(canvas) {console.log(canvas.toDataURL());that.imgSrc = canvas.toDataURL();});//隐藏元素this.test = false;});},//保存邀请函到本地// 下载邀请函generatorImage() {let link = document.createElement("a");link.href = this.imgSrc;//下载链接link.setAttribute("download","邀请函.png");link.style.display = "none";//a标签隐藏document.body.appendChild(link);link.click();},}
};
</script>

参考网址:

https://blog.csdn.net/weixin_45389051/article/details/105493364

https://www.cnblogs.com/shcs/p/11960593.html

vue canvas画海报相关推荐

【学习随记】原生js canvas 画海报
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
前端canvas画海报
效果图引用想直接看效果的可以不传值 <QrcodePoster style="width: 100%;" ref="poster"></Q ...
微信小程序使用canvas画海报分享图
项目场景: 很多小程序都会有一些分享海报的需求.因为我这边之前一直都是后端直接生成一张图片然后返回了的,我前端直接把路径放上去就可以了.但是,有时候后端没直接生成海报,而是只生成了一个二维码,这时候就 ...
微信小程序--canvas 画海报转发好友下载本地
获取本地手机的屏幕宽高(宽高需要按照自己实际需求计算) toCanvas() {let that = thiswx.getSystemInfo({success: function(res) {con ...
uniapp中使用canvas 画海报总结
一.canvas 首先创建一个canvas标签,下面的事件是为了你点击海报的时候是会报错的,你需要定义一个事件,return就可以了!如图: <canvas class="canva ...
【uniapp】canvas画海报保存图片兼容H5和APP
APP.H5长按保存海报海波实现如下: html  <div class="app-h5-save-poster">& ...
vue canvas画多边形
第一个版本,只是单纯用来画多边形的,而且只能画一个. <template><div class="main"><div>这纷纷飞花,这纷纷飞花已 ...
uniapp使用canvas画海报二维码
目录给定画布大小<在template内> 先引入js:js复制最下面的代码即可,用你的方法引入即可! 绘图:</
【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况
微信小程序,在使用canvas画海报的时候,会导致个别用户无法生成的情况,你们可以尝试把绘画某些块的代码注释掉再进行扫码调试,我前几天就遇到个别客户无法生成商品海报的情况,刚开始是以为上一个同事留的坑 ...
canvas画圆、画带有圆角填充色的矩形
canvas画海报圆形微信头像,包括紫色背景带有圆角的矩形方法 1.画圆 2.画填充色的带有圆角的矩形

vue canvas画海报

vue canvas画海报相关推荐

最新文章

热门文章