有个挺好用的插件能很好地实现vue生成海报图,虽然有一定的限制,但基本需求还是能实现的

1.安装

npm i vue-canvas-poster --save

2.全局配置

// or Global Install
import Vue from 'vue'
import vueCanvasPoster from 'vue-canvas-poster'
Vue.use(vueCanvasPoster)
或者按需引入  
import vueCanvasPoster from 'vue-canvas-poster'

components: {
vueCanvasPoster
}

  

3.使用

<vue-canvas-poster :painting="painting" @success="success"></vue-canvas-poster>

详情参考链接------https://segmentfault.com/a/1190000019975772

我只是代码的搬运工

vue使用canvas生成海报图的更多相关文章

  1. 微信小程序利用canvas生成海报分享图片

    一 . 效果 这是借用女神照生成的分享的海报,图片来自网络. 新增了poster组件和更新图片自适应 二 . 准备 准备两张图片连接,最好是自己开发账号验证的https图片链接. 三 . 实现思路 其 ...

  2. canvas生成海报

    虽然之前也做过类似的生成海报的项目,但是这个项目我又网上查找了一下,发现一个插件挺好用的  html2canvas.js http://html2canvas.hertzen.com/这里可以下载这个 ...

  3. C#自定义TemplateImage使用模板底图,运行时根据用户或产品信息生成海报图(1)

    由于经常需要基于固定的一个模板底图,生成微信小程序分享用的海报图,如果每次都调用绘图函数,手动编写每个placeholder的填充,重复而且容易出错,因此,封装一个TemplateImage,用于填充 ...

  4. 小程序canvas生成海报保存至手机相册

    小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...

  5. js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

    思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...

  6. 微信小程序分享之生成海报--canvas

    首先看文档 了解知识点~~(https://developers.weixin.qq.com/miniprogram/dev/component/) githup:https://github.com ...

  7. 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  8. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  9. 微信公众号生成海报(uniapp)

    前言 这几天接到一个需求,要在公众号内生成分享海报.之前有做过H5和小程序的,心想直接复制过来就行了.没想到踩了不少的坑,搞了好几天终于搞好了,特此分享一下,希望能对大家有所帮助. 效果图 代码实现 ...

随机推荐

  1. celery在项目中的使用

    1 关于celery是一个处理异步耗时任务的框架 由 worker 和broker 和store 3部分组成 worker是来处理消息的工人 broker是来存储请求消息的仓库 store是用来存储结 ...

  2. JWT--无状态单点登录

    序言 传统的 seesion 认证存在的问题: 1)用户信息存储在内存中,用户规模大之后增加服务器开销:2)由于登录信息存储在内存中,限制了登录机器,不利于分布式站点. JWT JWT无状态登录 常规 ...

  3. HDU 5919 Sequence ll

    Time limit 4500 ms Memory limit 131072 kB OS Windows Source 2016中国大学生程序设计竞赛(长春)-重现赛 中文题意 一个长度为n的序列,里 ...

  4. 【bzoj3998】[TJOI2015]弦论

    题目描述: 对于一个给定长度为N的字符串,求它的第K小子串是什么. 样例输入: aabc 0 3 样例输出: aab 题解: 构造后缀自动机,然后在后缀自动机上跑dfs 代码: #include &l ...

  5. 前向渲染使用重叠Reflection Capture 造成的反射通道接缝问题

    问题出现的条件: 使用UE4 4.16 使用Forward shading 使用多个Sphere Reflection Capture组件(有重叠的部分) 烘焙灯光后能看到明显的反射通道接缝 解决办法 ...

  6. 1px渲染成2px的场景及解决方案

    1.场景一: IE6 下默认div最小高度为2px,如何创建高为1px的容器? .minContainer{font-size:0px;overflow:hidden}   2.场景二: 移动端高分辨 ...

  7. MongoDB学习【四】—pymongo操作mongodb数据库

    一.pymongodb的安装 Python 要连接 MongoDB 需要 MongoDB 驱动,这里我们使用 PyMongo 驱动来连接. pip安装 pip 是一个通用的 Python 包管理工具, ...

  8. 通过命令直接修改jar包中的静态文件

    1.先将要修改的jar包备份 copy xxx.jar xxx.jar_bak 2.建立一个新的目录便于后面的打包 mkdir jar_tmp 3.将包放到刚刚创建的目录里解压 mv xxx.jar ...

  9. PHP 常用函数-url函数

    urlencode 和 rawurlencode urlencode 和 rawurlencode 两个函数都用来编码 URL 字符串.除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后 ...

  10. JS-在本页面禁止页面返回

    这个问题是最近遇到的 解决方案我百度的并测试有效 // 如果你希望用户不用有返回功能 可缩写如下 或使用location.replace('url')跳转链接 history.pushState(nu ...