有个挺好用的插件能很好地实现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. PHP文件操作基本代码

    PHP中提供了一系列的I/O函数,能简捷地实现我们所需要的功能,包括文件系统操作和目录操作(如“复制[copy]”).下面兄弟连PHP培训 小编给大家介绍的是基本的文件读写操作:(1)读文件 ;(2) ...

  2. JSP文件的上传和下载

    文件上传下载,与传统的方式不同,这里能够上传和下载10G以上的文件.而且支持断点续传. 通常情况下,我们在网站上面下载的时候都是单个文件下载,但是在实际的业务场景中,我们经常会遇到客户需要批量下载的场 ...

  3. int转字符串 stringstream

    1. 设定一个任意数字串,数出这个数中的偶数个数,奇数个数,及这个数中所包含的所有位数的总数,将答案按 “偶-奇-总” 的位序,排出得到新数.重复进行,最后会得到 123. #include<i ...

  4. 前端HTTP缓存

    Web 缓存大致可以分为:数据库缓存.服务器端缓存(代理服务器缓存.CDN 缓存).浏览器缓存.其中前端比较关心的是浏览器缓存,包括今天要说的HTTP缓存和前面说过的cookie.localStora ...

  5. RedisTemplate访问Redis数据结构(前言)

    Redis五种基本数据结构 redis提供键值对的形式对数据进行存储.支持五种数据类型:String(字符串),List(链表),Hash(散列),Set(无序集合),ZSet(有序集合).下面是网上 ...

  6. 解决VS中不能搜索被折叠的代码块

    问题不大,但容易被忽略,解决方法:

  7. PHP代码修改后提交,无法立即生效

    今天遇到一个坑爹的问题,就是我修改了PHP代码,提交到网站根目录以后,刷新浏览器居然无法立即生效,差不多得一分钟的样子再去刷新,才会看到更改后的效果. 出现这个问题的原因,是因为手头的项目需要较高的P ...

  8. Python Django的安装配置

    学习Django前,我们要确定电脑上是否已经安装了Python,目前Python有两个版本,不过这两个版本并不互相兼容,所以根据个人选择合适的版本. 因为从Django2.0开始将不再支持Python ...

  9. vCenter 部件关系简介 & 网络原理

    目录 目录 主机和集群 vCenter Datacenter Cluster Host Virtual Machine Folder Resource Pool Template 数据存储 Datas ...

  10. jt获取鼠标指针的位置

    屏幕 screenX和screenY属性表示鼠标在整个显示屏的位置,从屏幕(而不是浏览器)的左上角开始计算的. 页面 pageX和pageY属性表示鼠标指针在这个页面的位置.页面的顶部可能在可见区域之 ...