最新要闻

广告

手机

光庭信息跌4.57% 2021上市超募11亿2022扣非降74% 时快讯

光庭信息跌4.57% 2021上市超募11亿2022扣非降74% 时快讯

搜狐汽车全球快讯 | 大众汽车最新专利曝光:仪表支持拆卸 可用手机、平板替代-环球关注

搜狐汽车全球快讯 | 大众汽车最新专利曝光:仪表支持拆卸 可用手机、平板替代-环球关注

家电

全球快讯:前端Vue一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按保存图片

来源:博客园


(资料图)

前端Vue一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按保存图片,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13326

效果图如下:

cc-beautyPoster

使用方法

posterData: {// 用户姓名name: "小明",// 用户头像logo: "https://cdn.pixabay.com/photo/2014/02/17/10/20/statue-of-liberty-267948_1280.jpg",// 商品名称title: "精美时尚苹果手机一部",// 商品价格money: "5200.90",// 商品图片img: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",// 商品链接url: "https://www.apple.com.cn/iphone/"},

HTML代码实现部分

<script>import uniPopup from "@/components/uni-popup/uni-popup.vue"export default {components: {uniPopup},data() {return {shows: false,posterData: {// 用户姓名name: "小明",// 用户头像logo: "https://cdn.pixabay.com/photo/2014/02/17/10/20/statue-of-liberty-267948_1280.jpg",// 商品名称title: "精美时尚苹果手机一部",// 商品价格money: "5200.90",// 商品图片img: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",// 商品链接url: "https://www.apple.com.cn/iphone/"},}},methods: {//生成海报openPoster() {this.shows = falseuni.showLoading({title: "海报绘制中.."})this.$refs.popup.open()setTimeout(() => {uni.hideLoading()this.shows = true}, 400)},//关闭海报hidePoster() {this.$refs.popup.close()},}}</script>

关键词: