canvas绘制图像 保存

I share my blog posts on Twitter, and there’s been a time when I entertained myself drawing drawing an image for each blog post.

我在Twitter上分享我的博客文章，有时候我会为每个博客文章绘制图像来娱乐自己。

I set up Hugo so it uses an image named banner.png or banner.jpg stored in the post folder to be used as the Open Graph image, like this:

我设置了Hugo，以便它使用存储在post文件夹中的名为 banner.png 或 banner.jpg 的图像用作“打开图形”图像，如下所示：

<meta property="og:image" content="https://flaviocopes.com/axios/banner.png" />

If a post has no image, I show my avatar instead:

如果帖子没有图片，我会显示我的头像：

<meta property="og:image" content="https://flaviocopes.com/img/avatar.png"

canvas绘制图像 保存I share my blog posts on Twitter, and there’s been a time when I entertained myself drawing drawing an image for each blog post. 我在Twitter上分享我的博客文章，有时候我会为每个博客文章绘制图像来娱乐自己。 I set up Hugo... 接近年底,又来活了,继支付宝推出年度报告之后,无数公司都在跟风 所以给我排了个活,就是做一个年度报告,然后根据一些数据对用户进行一个画像 最后用户能够 保存 他这个画像,然后分享啥的 这个年度报告画像是一个千人千面的图片,而且图片都有用户的头像 所以最后的图片只能在前端进行生成 既然选择在前端生成就只能 使用 canvas 进行 绘制 了 绘制 出来图片之后,用户 保存 就行了**(简简单单一句话,耗费我多少精血)** 项目比较老,之前选用的canv const { create Canvas , loadImage } = require(' canvas '); const canvas = create Canvas (width, height); const context = canvas .getContext('2d') //这里是因为传入多个坐标，所以进行了循环 //imag 要加载的图片，0，0，分别代表x，坐标，后两个参数分别代表宽度和高度 context.drawI // 1.获取 canvas 对象 const query = uni.createSelectorQuery().in(this); query.select('# canvas ').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const ctx = canvas .getContext('2d'); // 在 canvas 绘制 二维码 // 2. 保存 图片到本地 uni. canvas ToTempFilePath({ canvas Id: ' canvas ', // canvas Id即为 canvas 的id success: (res) => { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () => { uni.showToast({ title: ' 保存 成功', duration: 2000 }, this); 以上代码中，我们首先 使用 uni.createSelectorQuery获取 canvas 对象，并在 canvas 中 绘制 二维码。接着，我们调用uni. canvas ToTempFilePath将 canvas 转换成图片并获取该图片的临时文件路径，最后我们 使用 uni.saveImageToPhotosAlbum 保存 图片到本地相册。若 保存 成功，我们则弹出 保存 成功的提示。