淘宝生成图片二维码分享

最近公司需求提出仿淘宝分享生成一张含有图片/二维码/文字的图片

实现方法：

采用的canvas 插入图片和生成图片的功能
生成二维码采用的是QRCode 插件

实现效果：

实现步骤：
我是在vue环境中实现的
1.引入qrcode

1安装插件 npm install qrcode
2、在main.js中引入
import QRCode from 'qrcode'    //定义生成二维码组件

2.dom元素构建

 <div id="app"><button class="btn" @click="drawChart">绘图</button>  //点击按钮生成图片<div class="wrap" v-show="show"><canvas width="300" height="500" id="container"></canvas></div></div>

3.js绘制

drawChart() {this.canvas = document.querySelector('#container')let ctx = this.canvas.getContext('2d');ctx.fillStyle = '#fff'ctx.fillRect(0, 0, 300, 500)//标题let title = '这个不错#聚划算团购#宝贝不错：pawinpawing',price = '￥599'this.drawText(ctx，title, 10, 390, 170)  // 文字我默认显示两行ctx.fillStyle = '#f34234'ctx.font = "bold 30px 宋体";ctx.fillText(price, 10, 480)//生成的二维码内容，可以添加变量let QueryDetail = `https://detail.tmall.hk/hk/item.htm?spm=a1z10.1-b-s.w5003-18691032235.7.321f11cbnb03Tv&id=541928730880&rn=f938c20c3d2ec15358e831071db22d38&abbucket=8&scene=taobao_shop`;let canvsCode = document.createElement('canvas')canvsCode.width = 100canvsCode.height = 100QRCode.toCanvas(canvsCode, QueryDetail, function (error) { })var image = new Image();image.src = canvsCode.toDataURL("image/png");   // 将链接转化为图片之后，再绘制到canvas中去image.onload = () => {ctx.drawImage(image, 190, 400, 100, 100)  }// 大图let imgBig = new Image()imgBig.setAttribute('crossOrigin', 'anonymous')imgBig.src = 'https://img.alicdn.com/imgextra/i2/54199406/O1CN012JLzreAxzn1xhNP_!!54199406.jpg'imgBig.onload = () => {ctx.drawImage(imgBig, 10, 10, 280, 380)let img = this.canvas.toDataURL('image/png')console.log(img)    // 最终生成的base64图片}},

文字显示两行的方法

 drawText (ctx, tit, x, y, width) {var titArr = tit.split("");var temp = "";var row = [];ctx.font = "20px Arial";ctx.fillStyle = "black";ctx.textBaseline = "middle";for (let i = 0; i < titArr .length; i++) {if (ctx.measureText(temp).width < w && ctx.measureText(temp + (titArr [i])).width <=width) {temp += titArr [i];}    //ctx.measureText(text).width  测量文本text的宽度else {row.push(temp);temp = titArr [i];}}row.push(temp);// 只显示2行，多余的省略 加...for (let j  = 0; j < 2; j++) {var str = row[j];if (j == 1) {str = str.substring(0, str.length - 1) + '...';}ctx.fillText(str, x, y + (j + 1) * 24);}}

淘宝生成图片二维码分享相关推荐

【uni-app】App实现二维码分享图合成(支持单张或多张)
[uni-app]App实现二维码分享图合成写在前面, 该文章目前仅支持合成特定数量的分享图, 不支持随意数量分享图合成一. 背景 app内实现一个邀请拉新功能, 需要根据每个用户生成各自的二维码 ...
通过web系统实现淘宝营销引流，小说或者视频上传之后自动生成二维码，通过二维码分享之后引入微信或者扣扣加群，群满自动切换到下一个，以及数据统计分析和若干个小工具集成
通过web系统实现淘宝营销引流,小说或者视频上传之后自动生成二维码,通过二维码分享之后引入微信或者扣扣加群,群满自动切换到下一个,以及数据统计分析和若干个小工具集成. 主要实现技术: 1.大文件视频分 ...
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
PHP生成带二维码的分享图片
综述项目开发中需求,要求在APP中进行分享的时候可以分享图片,图片由美工进行设计,其上带有二维码,分享给别人可以直接长按图片进行识别.这种方式在分享中用户体验更好,首先图片由美工设计很好看,其次这种 ...
jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）
首先给大家看一下效果图(纯jQuery前端技术): 提供一下demo 源代码和jquery.qrcode文件下载: https://download.csdn.net/download/qq15577 ...
H5案例分享：jquery.qrcode.js生成简易二维码
近期做项目需要生成二维码,并且解码获取信息,jquery.qrcode.js生成二维码比较的方便,写个教程分享给大家.欢迎大家测试留言,我会改进代码. 现在二维码越来越流行啦,支付扫二维码,关注扫二维 ...
前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册
前端Vue H5生成带二维码的分享海报,实现长按保存到手机相册前言:关于H5分享海报的需求,经常会遇到,通常就是一个分享的二维码+分享文案,生成一张图片,供用户在手机上长按保存到手机,然后就可以将保 ...
分享几个在线生成网址二维码的API接口
现在很多大网站都有这样的一个功能,使用手机扫描一下网页上的二维码便可快速在手机上访问网站.想要实现这样的功能其实很简单,下面麦布分享几个在线生成网址二维码的API接口.都是采用http协议接口,无需下 ...
怎么用python生成带二维码的照片_怎么制作二维码图片-Python 生成个性二维码
一.实验介绍1.1 实验内容本课程通过调用MyQR接口来实现生成个人所需二维码,并可以设置二维码的大小.是否在现有图片的基础上生成.是否生成动态二维码. 1.2 知识点 Python3基础 MyQR ...
php生成推广二维码海报、合成图片demo
php生成推广二维码海报.合成图片 1.海报背景图.背景图一般存服务器,程序本地读取: 2.推广二维码.可以是二维码图片链接,也可以是字符串图像流.如果自己生成二维码,详见phpqrcode官网,地址 ...

淘宝生成图片二维码分享

淘宝生成图片二维码分享相关推荐

最新文章

热门文章

淘宝 生成 图片二维码分享

淘宝 生成 图片二维码分享相关推荐

最新文章

热门文章

淘宝生成图片二维码分享

淘宝生成图片二维码分享相关推荐