有个挺好用的插件能很好地实现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. Math.min() Math.max() Math.min().apply() Math.max() .apply()该如何使用???

    Math.min()和 Math.max()  语法: Math.min(x,y) Math.max(x,y) 虽然能取到最小值和最大值,但是不支持数组. 那么如何计算数组中的大小值呢???????? ...

  2. div拖拽到iframe上方 导致 缩放和拖拽的不平滑和鼠标事件未放开 解决方法

    思路一:用在开始进行缩放(触发了resizable的start事件)为iframe添加z-index属性,将iframe放置在最下层. $("#draggable").resiza ...

  3. centos搭建lamp环境参考(根据腾讯云实验室)

    1.安装MYSQL 使用 yum 安装 MySQL: yum install mysql-server -y 安装完成后,启动 MySQL 服务: service mysqld restart 设置 ...

  4. Java——容器(Interator)

    [Interator接口]   <1> 所有实现了Collection接口的容器类都有一个interator方法用以返回一个实现了Interaor接口的对象. <2> Inte ...

  5. C++STL手写版

    手写STL,卡常专用. node为变量类型,可以自由定义,以下不再赘述. 1.stack(栈) 开一个数组,和一个top指针,压栈时++,弹栈时--即可. struct stack{ int tp;n ...

  6. 进阶1:Linux 环境准备_ 设置网络IP_安装火狐浏览器

    VM 已安装 centos6.5 Final 已安装 配置好了Linux  IP ,并能ping  通 ,例如 : ping www.baidu.com 设置LINUX 网络IP: https://j ...

  7. 180128-----Java面试题

    1 不用第三个变量,交换两个的值 a=1;b=2;a=a+b;b=a-b;a=a-b; 2 Java动态代理用什么实现? 反射

  8. CharacterEncodingFilter详解

    字符编码过滤器  (Spring框架对字符编码的处理) 基于函数回调,对所有请求起作用,只在容器初始化时调用一次,依赖于servlet容器. web.xml配置文件 <filter> &l ...

  9. 编写灵活、稳定、高质量的HTML代码的规范

    一.唯一定律 无论有多少人共同参与同一项目,一定要确保每一行代码都像是唯一个人编写的. 二.HTML 2.1 语法 (1)用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现 ...

  10. Git remotes/origin/pr/* 分支清理,代码回退等

    代码在gitHub上托管,每次git pull完后,用git branch -a都可以看到一堆remotes/origin/pr/*分支: 可以通过两种方式去除: 1,修改git的config文件找到 ...