微信小程序canvas画布新接口type为2D时wx.canvasToTempFilePath的参数差异
Posted 钻葛格
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序canvas画布新接口type为2D时wx.canvasToTempFilePath的参数差异相关的知识,希望对你有一定的参考价值。
参见文档:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
见下文第21行,不要使用 canvasId,canvas type="2d" 时,传入 canvas 组件实例 ,object类型。
btn_tap(e) {
var that = this;
var img_url = e.currentTarget.dataset.url;
const query = wx.createSelectorQuery();
query.select(\'#myCanvas\')
.fields({ node: true, size: true })
.exec((res) => {
const _canvas = res[0].node;
const ctx = _canvas.getContext(\'2d\');
const dpr = wx.getSystemInfoSync().pixelRatio;
_canvas.width = res[0].width * dpr
_canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.fillRect(0, 0, 480, 640)
let img = _canvas.createImage();
img.onload = () => {
ctx.drawImage(img, 0, 0, 480, 480);
wx.canvasToTempFilePath({
canvas: _canvas,
success: (resx) => {
wx.saveImageToPhotosAlbum({
filePath: resx.tempFilePath,
success: (resxx) => {
wx.showToast({
title: \'保存成功\',
duration: 1000,
});
}
});
},
fail: (ex) => {
console.log(ex);
}
});
};
img.src = img_url;
});
return;
}
以上是关于微信小程序canvas画布新接口type为2D时wx.canvasToTempFilePath的参数差异的主要内容,如果未能解决你的问题,请参考以下文章
一个轻量级的微信小程序 Canvas (type="2d") 渲染引擎