vue移动端，使用canvas生成商品海报及自定义海报

1.使用 vue-canvas-poster

npm i vue-canvas-poster --save

2.在main.js入口文件中引入

import VueCanvasPoster from 'vue-canvas-poster'
Vue.use(VueCanvasPoster)

3.html代码

<template><div class><vue-canvas-poster :widthPixels="0" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster><img :src="img" /></div>
</template>

4.js代码

export default {props: {},data() {return {painting: {width: `${document.documentElement.clientWidth}px`,height: `${document.documentElement.clientWidth * 1.777}px`,background: "#f4f5f7",views: [{type: "image", //海报背景url: require("@/assets/images/goods_poster.png"),css: {width: "auto",height: `${document.documentElement.clientWidth * 1.777}px`,top: "0",left: "0",mode: "aspectFill",},},{type: "image", //商品图url: require("@/assets/images/shopimgs.png"),css: {width: `90%`,height: `400px`,top: "80px",left: `5%`,borderRadius: "10px",},},{type: "image", //海报头像url: require("@/assets/images/head.png"),css: {width: `${document.documentElement.clientWidth / 7.5}px`,height: `${document.documentElement.clientWidth / 7.5}px`,top: `20px`,left: `20px`,},},{type: "qrcode",content:"云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。",css: {top: `560px`,right: `20px`,color: "#000",width: `${document.documentElement.clientWidth / 4.1}px`,height: `${document.documentElement.clientWidth / 4.1}px`,},},{type: "text",text: "你爸爸",css: [{top: `24px`,left: `80px`,color: "rgba(52,52,52,1)",fontSize: "15px",},],},{type: "text",text: "推荐一个好礼物给你",css: [{top: `50px`,left: `80px`,color: "rgba(52,52,52,1)",fontSize: "15px",},],},{type: "text",text: "欧莱雅女士小蓝瓶，让你变得更美",css: [{top: `490px`,left: `20px`,color: "black",fontSize: "15px",},],},{type: "text",text: "￥ 4830",css: [{top: `550px`,left: `20px`,color: "red",fontSize: "18px",fontWeight: "bold",},],},{type: "text",text: "￥7980.00",css: [{top: `553px`,left: `100px`,color: "#333",fontSize: "14px",textDecoration: "line-through",},],},],},img: "",};},created() {},mounted() {},methods: {success(src) {this.img = src;},fail(err) {console.log("fail", err);},},
};

5.预览图

6.自定义配置 type属性支持"text"文本，"image"图片，"qrcode"二维码，"rect"矩形

数组中的css对象中是根据position来定位支持

api 文档如下

type	内容	说明	类型
text	text	文本内容	string 例如：text: "小明",
image	url	图片地址（支持本地图片和网络图片）	string 例如：url: require（"@/assets/images/XX.png"） "https://static/12324/XXX.png"
qrcode	content	二维码内容文本或者链接	string 例如：content: "云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。",
rect	无	矩形支持css（以下见附表）	string 例如：div

附表css对象（6.1） image

属性名称	说明	defaults
width	图片宽度	auto
height	图片高度	auto
mode	图片剪裁缩放	aspectFill （ scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。）

（6.2）text

属性名称	说明	defaults
fontSize	字体大小	20px
color	字体颜色	black
maxLines	最大行数(超出显示三个点 ...)	不限，根据 width 来
lineHeight	行高（上下两行文字baseline的距离）	fontSize 大小
fontWeight	字体粗细。仅支持 normal, bold	normal
textDecoration	文本修饰，支持 underline、 overline、 line-through，也可组合使用	无
textStyle	fill：填充样式，stroke：镂空样式	fill
fontFamily	字体	sans-serif
background	文字背景颜色	无
padding	文字背景颜色边际与文字间距	0px
textAlign	文字的对齐方式，分为 left, center, right，view 的对齐方式请看 align 属性	left

rotate	旋转，按照顺时针旋转的度数	不旋转
width、height	view 的宽度和高度，其中 image 和 text 可不设置	无
top、right、bottom、left	如 css 中为 absolute 布局时的作用，可为负值	默认 top 和 left 为 0
borderRadius	边界圆角程度，如果是正方形布局，该属性为一半宽或高时，则为圆形	0
borderWidth	边界宽度，外边界	必设值，否则无边框效果
borderColor	边框颜色	black
shadow	盒子阴影例如： shadow: 'h-shadow v-shadow blur color'; h-shadow: 必需。水平阴影的位置。允许负值。 v-shadow: 必需。垂直阴影的位置。允许负值 blur: 必需。模糊的距离 color: 必需。阴影的颜色。	shadow 可以同时修饰 image、rect、text、qrcode 等。在修饰 text 时则相当于 text-shadow；修饰 image 和 rect 时相当于 box-shadow；修饰 qrcode 时，则相当于二维码有效区域的投影。
linear-gradient	线性渐变例如：linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%)	无你可以在画布的 background 属性或者 rect 的 color 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 view 中点，半径为最长边，目前不支持自己设置。
radial-gradient	径向渐变例如：radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)	无你可以在画布的 background 属性或者 rect 的 color 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 view 中点，半径为最长边，目前不支持自己设置。

(6.3) rect (同样支持text)

属性名称	说明	defaults
rotate	旋转，按照顺时针旋转的度数	不旋转
width、height	view 的宽度和高度，其中 image 和 text 可不设置	无
top、right、bottom、left	如 css 中为 absolute 布局时的作用，可为负值	默认 top 和 left 为 0

vue移动端，使用canvas生成商品海报及自定义海报相关推荐

小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
vue移动端项目怎么生成apk_将Vue移动端项目打包成手机app---HBuilder
将移动端页面打包成app 1.使用 HBuilder 直接编译打包点击左上角文件>打开目录>选择目录选择用Webpack打包好的dist文件目录由于我添加到项目了,所以会显示该项 ...
【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况
微信小程序,在使用canvas画海报的时候,会导致个别用户无法生成的情况,你们可以尝试把绘画某些块的代码注释掉再进行扫码调试,我前几天就遇到个别客户无法生成商品海报的情况,刚开始是以为上一个同事留的坑 ...
vue中如何使用canvas循环生成多张海报？
一. 需求背景长按分享图片,图片中含有自己分享链接生成的二维码,需要把二维码和背景图合成一张海报,项目需求是循环生成多张海报二. canvas画布的生成条件要生成画布的html元素不能是隐藏状态 ...
uniapp 生成商品分享通用海报源码详解
uniapp 生成商品分享通用海报源码,使用canvas生成海报,圆片加圆角,标题换行显示两排多余点点,兼容H5端和小程序端. 组件显示代码<template><view>& ...
uniapp中使用canvas生成海报
如下图,是在H5中测试,canvas生成后需要保存图片,使用uni.canvasToTempFilePath(官方文档API支持H5的)拿到绘制海报的base64,保存图片,如果提示画布被污染,看看是 ...
uniapp生成商品分享海报
uniapp用canvas生成一个分享商品的海报文章目录前言一.展示效果二.使用步骤 1.HTML部分 2.CSS部分 3.JS部分总结前言 uniapp用canvas生成一个分享商品的海 ...
js 通过canvas生成带二维码的海报图
前言 h5移动端生成海报图,可长按图片保存或发送给朋友,或长按识别二维码.两种场景:第一种是生成项目分享海报图,通过背景图和地址生成的二维码合成一张海报图:第二种是通过页面生成商品海报图,页面有产品介 ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...

vue移动端，使用canvas生成商品海报及自定义海报

vue移动端，使用canvas生成商品海报及自定义海报相关推荐

最新文章

热门文章