H5公众号-canvas海报分享图+生成二维码

先npm install 安装这俩个插件，然后导入需要的页面中

二维码：

//第一步：引入：
import Qrcode from "@xkeshi/vue-qrcode";
// 第二步：注册：
components: {qrcode: Qrcode //二维码的插件需要注册组件},
// 第三步：使用：
<template><qrcode :value="qrcodeUrl"  style="width: 72px;height: 72px"></qrcode>
<template>Ï
// 第四步：
qrcodeUrl： 'https://baidu.com' // 自己定义地址

生成海报：

现在页面上写好海报的样式，然后通过this.$refs.xxx获取到节点传入html2canvas方法方法中，再赋值给img标签显示，浏览器默认图片自带保存功能

mage.crossOrigin支持跨域图片这个一定要放在src赋值之前，否则再ios手机上图片显示不出来

import html2canvas from "html2canvas";
// 调用：
html2canvas(this.$refs.xxxx, { backgroundColor: null }).then(canvas => {// 转成图片，生成图片地址this.imgUrl = canvas.toDataURL("image/png");this.canvasShow = true;});

海报一般都有接口返回的网络图，因为canvas无法绘制网络图，所以要下载到本地再调用html2canvas方法

handelCanvas() {const datas = {AlbumId: this.albumIdId};this.$axios.post(this.api.xxxxx, datas).then(res => {// console.log("分享快照==>", res);this.albumsShare = res.data;var that = this;this.main(res.data.HeadImg, function(base64) {that.HeadImg = base64;});res.data.AlbumImage = res.data.AlbumImage.substring(0,res.data.AlbumImage.indexOf("?"));console.log(res.data.AlbumImage);this.main(res.data.AlbumImage, function(base64) {that.AlbumImage = base64;});});},// 将图片转base64getBase64Image(img) {var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpegreturn dataURL;},// 下载网络图片main(src, cb) {var image = new Image();image.crossOrigin = "*"; // 支持跨域图片 这个一定要放在src赋值之前，否则再ios手机上图片显示不出来image.src = src + "?v=" + Math.random(); // 处理缓存var that = this;image.onload = function() {var base64 = that.getBase64Image(image);cb && cb(base64);};},

H5公众号-canvas海报分享图+生成二维码相关推荐

Java微信公众号开发之创建带参数二维码
生成带参数二维码接口文档:生成带参数二维码一.介绍 1.1.目前有2种类型的二维码: 1. 临时二维码:临时二维码,是有过期时间的,最长可以设置为在二维码生成后的30天(即2592000秒)后过期, ...
【微信公众号】微信集成功能--扫描二维码完成用户登录操作
目录需求来源实现思路 1.进入登录页面,生成微信公众号的临时二维码: 2.用户通过微信扫一扫二维码: 3.登录页面定时查询扫码结果: 代码实现(基于Laravel框架前后端混合) HTML PHP ...
哪个微信公众号第三方平台可以设置渠道二维码?
假如你分别在公交站台.地铁广告.电视媒体投放了一则广告,你可以通过渠道二维码将这三个推广渠道分别生成一个独立的二维码,通过不同二维码关注的粉丝,在微号帮平台可以清楚的知道粉丝来源,从而对推广渠道的效果 ...
php联图生成二维码浏览器扫可以到页面，但是QQ或微信扫直接显示链接
$_SERVER['SERVER_NAME'] 如果用这个获取当前运行脚本所在服务器的主机名.如果脚本运行于虚拟主机中,该名称就由那个虚拟主机所设置的值决定.如果你是用改方法获取的不可以,只有把域名写 ...
Vue - H5 生成带二维码和文案的宣传海报（可自定义二维码扫描后的内容、海报背景图、文案文字、宽高间距等）用 HTML 写可 DIY 的海报，做完后转为图片供用户保存和转发下载
前言这种需求常见于内容分享时,需要自动生成海报(图片)供用户保存或截图转发,网上的大部分教程都太乱且有 BUG. 本文将带您从 0-1 一路复制,完成一个兼容性好.健壮.注释详细的示例, 开箱即用, ...
微信公众平台生成二维码海报是如何做到的？
实现微信公众号里面点击子菜单生成带有粉丝二维码的海报关注微信服务号自动生成二维码海报发送关键词到公众号生成带有粉丝头像昵称的海报二维码 1.从微号帮平台我的公众号功能管理 2.生成海报二维码海 ...
uniapp 生成分享图片(图片+二维码)，并保存到本地相册功能实现
生成分享图片使用场景在使用电商app时,通常有个分享给好友的功能,如果想要做分销类型,发展下线,也就是你邀请的好友是你的下级的话,就需要分享时将个人信息附带进去,因此会涉及到生成分享图片. 界面 ...
生成二维码合成海报并下载
生成二维码,选择一张海报,然后生成二维码并下载, 主要代码生成二维码代码 ///生成二维码var qrcode = new QRCode("qrcode");// 生成二维码的方 ...
iOS 生成二维码/条形码
级别:★★☆☆☆ 标签:「iOS CIFilter」「CIQRCodeGenerator」「CICode128BarcodeGenerator」「二维码加logo」作者: Xs·H 审校: QiSh ...

H5公众号-canvas海报分享图+生成二维码

二维码：

生成海报：

H5公众号-canvas海报分享图+生成二维码相关推荐

最新文章

热门文章