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

2023-07-05 10:07:29 来源：博客园

(资料图)

前端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>

关键词：

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

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

效果图如下:

cc-beautyPoster

使用方法

HTML代码实现部分

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

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