微信小程序使用html2canvas,微信小程序canvas 2d 引入本地图片并生成分享图

在小程序基础库 v2.9.0 正式开放一套全新的 Canvas 接口。该接口符合 HTML Canvas 2D 的标准，实现上采用 GPU 硬件加速，渲染性能相比于现有的 Canvas 接口有一倍左右的提升。

接口用法可参考该代码片段。

本文在此代码片段上做了点调整，来实现引入本地图片并生成分享图

index.wxml

index.js

const app = getApp()

Page({

data: {

onLoad: function () {

const query = wx.createSelectorQuery();//如果是在组件中，则改成 this.createSelectorQuery()

query.select('#canvas').fields({

node: true,

rect: true

}, res => {

const canvas = res.node;

const ctx = canvas.getContext('2d');

canvas.width = 500;//本地图像的width

canvas.height = 753;//本地图像的height

this.render(canvas, ctx);

}).exec()

render(canvas, ctx) {

let that = this;

let img = canvas.createImage();//canvas 2d 通过此函数创建一个图片对象

img.onload = (e) => {

console.log('img loaded')

ctx.drawImage(img, 0, 0, 500, 753);

ctx.font = "28px sans-serif";

ctx.fillStyle = "rgba(0, 0, 0, 1)";

ctx.fillText("我是分享文字111111111", 0, 40);

ctx.fillStyle = "rgba(0, 0, 0, .5)";

ctx.fillText("我是分享文字222", 0, 80);

wx.canvasToTempFilePath({

canvas,

wwidth: 500,

height: 753,

destWidth:500,

destHeight:753,

success(res) {

console.log(res.tempFilePath)

that.setData({

imgSrc:res.tempFilePath

})

}

}, that)

}

img.onerror = (e) => {

console.error('err:', e)

}

img.src = './share.jpg'

})

微信小程序使用html2canvas,微信小程序canvas 2d 引入本地图片并生成分享图相关推荐

小程序采用html2canvas实现html转canvas保存图片
mpaas小程序中采用html2canvas实现html转canvas保存图片使用uniapp将代码打包一份h5部署到服务器 h5要保存的图片组件页面report.vue 安装 npm instal ...
【Python小工具】若干图片合并生成动态图（.gif）
相信很多学生党.上班族在日常的学习.科研.办公中总会有一些比较特殊的需求,本人作为一个理工科(非计算机相关专业)学生和大家一样.有时好不容易找到了比较心仪的工具,却发现还要收费,质量和使用的便捷性也不 ...
微信小程序使用html2canvas,在小程序中使用canvas的方法示例
一直没有怎么使用过canvas,小程序也是之前看过一个视频而已,想要找个例子结合一下两者.所以一个小小的保存图片作为朋友圈相册封面的demo就这么出现了,在这里主要记录一下自己遇到的一些问题以及解决的 ...
【愚公系列】2022年08月微信小程序-view生成分享图片
文章目录前言一.view生成分享图片 1.组件的封装 2.组件的使用 3.效果 4.第三方工具的使用前言微信小程序并不支持view直接转绘到画布上,想要实现海报功能必须通过以下4个步骤: 通过 ...
编程日历小程序，对小程序云开发和生成分享海报的实践
1.起源朋友圈晒的很多的一本日历书<了不起的程序员 2021>,我也买了,很厚,纸质书嘛,现在已经很少看了,加上这是一本日历书,希望是每天都打开看.可实际上的情况是,要么忘记看今天的内容 ...
小程序快速生成朋友圈海报分享图
由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片,然后引导用户下载图片到本地后再分享到朋友圈.相信大家在绘制 ...
微信小程序生成分享图然后保存图片分享朋友圈
微信小程序可以实现快速的转发好友实现分享,但是不能直接分享到朋友圈,但是有需要要这么做,要怎么实现呢? 查看文档之后,大概有了实现思路 1.使用微信小程序的wx.createCanvasContext ...
实现一个小程序分享图 wxml2canvas
我们经常会遇上动态生成海报的需求,而在小程序中,生成图片非Canvas莫属.但是在实际工作当中,为了追求效率,我们会不可避免地去使用一些JS插件,而 wxml-to-canvas 就是一款官方推荐且非 ...
来~打包实现小程序动态分享图一条龙服务( ¨̮ )
前一阵有完成在小程序内动态生成图片再进行分享的需求,是很常见的场景,因此我抽出了一个小工具CanvasPainter.js,囊括在小程序内canvas画图基本需求: 用配置形式绘图(暂支持单行及多行文 ...

微信小程序使用html2canvas,微信小程序canvas 2d 引入本地图片并生成分享图

微信小程序使用html2canvas,微信小程序canvas 2d 引入本地图片并生成分享图相关推荐

最新文章

热门文章