sunniejs / vue-canvas-poster

vue生成海报图，一个通过 css 属性画 canvas 图片的轻量级的 vue 组件 (Vue poster,a lightweight vue component that draws canvas images via css properties.)

Vue Canvas Poster 🎉

Vue Canvas Poster 一个通过 css 属性画 canvas 图片的轻量级的 vue 组件。 (A lightweight vue components use canvas draw image by css properties.)

Vue Canvas Poster 文档

主要特性：

• 绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗、文字缩进)
• 绘制图片(圆角、旋转、边框、模式:类似小程序 image mode)
• 绘制矩形(圆角、旋转、边框)
• 绘制二维码
• 渐变
• 阴影

为什么使用 vue-canvas-poster

简单： 使用类css属性的方式生成canvas图。
易用： 通过npm安装，简单上手 。
无依赖： 无其他依赖库。
高清： 可以通过 widthPixels 设置生成图片尺寸，解决图片模糊问题。

升级说明

v1.2.0 2020-12-25 1. 文字添加 textIndent 属性，可为文字添加首行缩进样式。2. 文字fontWeight 字重，从原来只能设置'normal', 'bold' 现在增加至可设置'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'。

v1.0.0 以上增加了很多特性，新老版本不兼容，请谨慎升级，老版本不在维护，如果你用的是老版本的请移步 0.1.16

注意：版本 v1.1.1 及以上采用 VueCanvasPoster 大写，低版本vueCanvasPoster升级需要修改

import { VueCanvasPoster } from 'vue-canvas-poster'

预览

线上 Demo

查看 demo 建议手机端查看

手机扫码查看

上线项目

关注我的知乎，掘金

知乎: vue canvas 生成微信分享海报
掘金: vue canvas 生成微信分享海报

特别鸣谢 ​

Painter

贡献代码

使用过程中发现任何问题都可以提Issue 给我，也非常欢迎 PR 或 Pull Request

如何找到失散已久的组织？

    扫描下方二维码:point_down::point_down:关注“前端女塾”

关注公众号：回复“加群”即可加 前端仙女群

vue-canvas-poster's Issues

移动端生成海报模糊问题

移动端生成海报模糊问题

需要加参数解决Retina适配

组件下canvas css为什么设置成2000？

你好，请使用下面的模板创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

Browser version [浏览器类型和版本]

vue-canvas-poster version [vue_canvas_poster 版本]

Vue version [Vue 版本]

reappear link [重现链接]

One-line summary [描述问题]

Other comments [其他信息]

vue3 怎么解决兼容

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

同页面多张海报时，widthPixels重新计算宽高bug

你好，请使用下面的模板创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

Browser version [浏览器类型和版本]
chrome 最新版

vue-canvas-poster version [vue_canvas_poster 版本]
1.2.1

Vue version [Vue 版本]
2.6.1

reappear link [重现链接]
无

One-line summary [描述问题]
场景： 页面上同时需要生成三张海报， 海报背景宽高微 1080px 1920px ， 但是由于某些场景问题 需要根据 组件的widthPixels属性去动态的调整海报生成的宽高，我看源码会在字符串原型链上的.toPx()方法 去计算缩放比例， 重设宽高 只有一张海报的时候后没问题， 但是三张海报的时候，由于 重置setStringPrototype(1) 是最开始的时候执行， 但是在异步任务里执行的， 会导致在promise.then中， 没有重置scale缩放比例， 这时候使用.toPx()方法会沿用上一次的缩放 导致 比如三张海报都需要计算scale， 实际结果是 第一张没问题， 第二张延用了上一个的宽度缩放，但是高度没缩放，同时重置了 setStringPrototype(1) 缩放比， 第三张又没问题， 依次类推 第偶数张的海报 宽度缩了， 但高度没缩

Other comments [其他信息]
无

设置text能不能水平垂直居中

现在文本只有水平居中.没有垂直居中,
像我这个文字是动态的.最大三行.但是文字少的时候在最上面不好看.要是能水平垂直居中就最好了

操作成功之后返回的base64海报图片怎么保存在手机本地相册里面？

有没有大佬帮帮忙。

页面中多个vue-canvas-poster,生成的图片宽度不对

Browser version [chrome]

vue-canvas-poster version [vue_canvas_poster1.2.1]

Vue version [Vue 2.6.11]

One-line summary [在页面中使用v-for 创建三个vue-canvas-poster,分别赋予三个不同的样式，widthPixels设置为1000，painting里面的width:375, 结果-->第二个vue-canvas-poster生成的图片 宽度实际为1000

Other comments [其他信息]

为什么组件里canvas默认是 top:2000px ?

绘制出的图片不清晰 如何解决？

widthPixels设置1080，图片比较长 > 1680 左右，移动端真机卡死

你好，请使用下面的模板创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

Browser version [浏览器类型和版本]

vue-canvas-poster version [vue_canvas_poster 版本]

Vue version [Vue 版本]

reappear link [重现链接]

One-line summary [描述问题]

Other comments [其他信息]

自我推荐下easy-canvas

厚脸皮推荐下，欢迎交流～ https://github.com/Gitjinfeiyang/easy-canvas

请问在不是vue-cli的项目中怎么使用vue_canvas_poster

多页面应用程序，使用vue_canvas_poster 怎么引入

请问怎么批量生成呢？

请问能整个组件弄成个事件来直接调用吗？而不需要在模板里写。

解决图片跨域

关于项目大家问的最多的问题就是图片出现了跨域，大家可以在这里积极的提出解决方案。

网络图片跨域的问题有办法解决吗

卡住了啊，有啥好办法吗

text 设置fontFamily 字体无效

谷歌浏览器 版本 95.0.4638.69（正式版本） (x86_64)
"vue-canvas-poster": "^1.2.1"

"vue": "2.6.10",

本地下载测试

text 设置fontFamily 字体无效 this.ctx.font这部分打印是拿到了的

页面上其他非画图部分 都是能看到 fontFamily生效了的

safari 和 ios canvas请求图片跨域

设置widthPixels的值是painting:width的两倍，绘制图片高度偶尔会计算不出来

Browser version [浏览器类型和版本]
chrome 最新版

vue-canvas-poster version [vue_canvas_poster 版本]
1.2.1

Vue version [Vue 版本]
2.6.1

reappear link [重现链接]
无

One-line summary [描述问题]
只有一张图片的时候，频繁生成图片的话，会有几率出现异常。
宽度是[widthPixels]的值，高度反而是[painting]的height

Other comments [其他信息]

图片加圆角的时候，阴影无效

怎么解决？

在苹果手机下使用微信浏览器生成后，并保存到本地，再转发给朋友，就识别不出来二维码了，在安卓手机上同样的操作是没有问题的

你好，请使用下面的模板创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

Browser version [浏览器类型和版本]

vue-canvas-poster version [vue_canvas_poster 版本]

Vue version [Vue 版本]

reappear link [重现链接]

One-line summary [描述问题]

Other comments [其他信息]

生成的字体或图片模糊

图片尺寸是够的，可是模糊，是否能增加一个压缩设定

lineHeight 设置过后，字体有行高，但是并不是剧中

你好，请使用下面的模板创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

Browser version [chrome88.0.4324.190]

vue-canvas-poster version [v1.2.0]

Vue version [2.5.2]

One-line summary [lineHeight 设置过后，字体有行高，但是并不是剧中]

vue-canvas-poster 支持chrome 最低到什么版本

超过100k的网络图片无法生成海报

从后台获取的图片超过100k后就无法生成海报

支持vue3 cli4.0 吗

Uncaught (in promise) TypeError: h is not a function
at Proxy.render (vue-canvas-poster.umd.js?33a5:5418)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:710)
at componentEffect (runtime-core.esm-bundler.js?5c40:4193)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at flushJobs (runtime-core.esm-bundler.js?5c40:362)

希望作者可以增加一个参数

希望作者可以增加一个参数，
pen.paint(() => { var imageBase64 = this.canvas.toDataURL('image/png') this.$emit('success', imageBase64) })
canvas的toDataURL方法里可以动态传入不同的image类型参数。

在项目实践中发现，绘制好的base64图片不是/9j/开头的格式，在传到阿里云OSS空间后，通过企业微信的JSAPI发送图片类型消息，服务端返回了media_id，但是图片发送失败。发现canvas的toDataURL参数传入'image/jpeg'生成的base64图片在企业微信API里发送是没有问题的，这可能是企业微信的限制。

这也许是实际应用场景里的一种需求，希望作者可以考虑采纳一下。

网络图片时，安卓生成失败，ios生成成功

Failed to execute drawImage on CanvasRenderingContenty2d the provided value is not of type
ios机型就正常。
安卓机就不正常。
报错入下：
https://i.imgur.com/dpjSsrG.jpg

安装有问题

cnpm、npm安装成功
问题1.运行的时候提示：“To install it, you can run: npm install --save vue-canvas-poster”
全局引用和页面引用都不行

同样的我找到了一个和这个类似的插件“vue-canvas-poster-yufan”，完美运行使用，但是不支持二维码。请帮忙解决一下，急

图片可以增加透明度吗

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

建议使用vue-qr增强二维码功能

如果二维码可以嵌入 ICON，就更棒了。
https://github.com/Binaryify/vue-qr

怎么获取单个字体的字体宽度啊？

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

包含 长图 手机上 生成失败，pc手机模拟器好着

你好，请使用下面的模板创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

Browser version [浏览器类型和版本]
不区分都一样

vue-canvas-poster version [vue_canvas_poster 版本]
1.1.1

Vue version [Vue 版本]
2.0

reappear link [重现链接]
坏连接：
https://shopbeta.smartcampus.cloud/#/goodsDetail?sharedCode=22E7F31A339D1AE7035C77690DD12C0CE04FA9C91A0F188896A32AD0D47372919FA00AA9CBBB1383E75F9E16BF58CCA2803DF545BD2CCDE4B11200C9E240640F&goodsToken
好连接：
https://shopbeta.smartcampus.cloud/#/goodsDetail?sharedCode=22E7F31A339D1AE7035C77690DD12C0CE04FA9C91A0F188896A32AD0D4737291F5A56B2CA37643ACBBF55A8F7AF0E101B173B3F5657A0C01F8B952742C57B561&goodsToken

One-line summary [描述问题]

Other comments [其他信息]

图片跨域怎么处理

现在遇到一个问题就是加载的图片如果是线上跨域了，可以设置跨域参数但是好像你没有提供出来

安装成功 但npm run dev提示依赖未找到

npm install成功之后，但npm run dev一直提示：
 This dependency was not found: * vue-canvas-poster in ./src/main.js
解决办法：将vue-canvas-poster的package.json中的main字段改为'./src/lib/index.js'

image不支持以http协议开头的网络图片

{
type: 'image',
url: 'http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg',
left: 25,
top: 150,
width: 500,
height: 302,
},

图片跨域，报错，导致走到fail回调。

报错信息，请求的url就是报错的那个url
Access to image at 'http://test-trip-plus.oss-cn-shenzhen.aliyuncs.com/2020/4/19/19/5/57ovib7tyx2gaqfmio2ose8.jpg' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
fail失败的回调报错信息：
fail-this.template 失败的参数 TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at Painter._drawAbsImage (vue-canvas-poster.umd.js?33a5:4319) at Painter._drawAbsolute (vue-canvas-poster.umd.js?33a5:3942) at Painter.paint (vue-canvas-poster.umd.js?33a5:3882) at eval (vue-canvas-poster.umd.js?33a5:4770)
后台阿里云oss跨域配置是*，尝试后还是不行

HBuilderX编译成小程序的时候无法使用

你好，请使用下面的模板创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

Browser version [小程序浏览器]

vue-canvas-poster version [最新版本]

Vue version [2.6]

reappear link [无]

One-line summary [使用文档的方式在HbuilderX中引用组件无法实现，只能在浏览器中画海报，小程序无法编译进去提示Cannot read property 'prototype' of undefined]

Other comments [其他信息]

painting

能否给出demo代码

uniapp中无法编译成小程序运行

uniapp中无法编译成小程序运行，提示错误如下：
[ WXML 文件编译错误]
pages/index/components/index.json: ["usingComponents"]["vue-canvas-poster"] 未找到(env: Windows,qymp,1.06.2306020; lib: 2.20.3)

设置text文字居中没有效果

你好，请使用下面的模板创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

Browser version [ios]

vue-canvas-poster version [最新版本]

Vue version [2.6]

reappear link [重现链接]

One-line summary [设置align: "center",没有效果 其他的属性值也没有效果 比如left right]

Other comments [其他信息]

第一次生成有几率会出现，画布显示不全的情况

vue-canvas-poster version [1.1.1]
Vue version [2.9.6]

第一次：http://suo.im/5IbkN8 第二次：http://suo.im/64JXtv

第一次画布显示不全，第二次以后，都是正常的情况。

安卓生成失败，ios就生成成功，有人遇见么

Failed to execute drawImage on CanvasRenderingContenty2d the provided value is not of type
ios机型就正常。
安卓机就不正常。
报错入下：
https://i.imgur.com/dpjSsrG.jpg

text可以修改字体吗