微信小程序canvas 图片绘制

看其他人写的代码出现的其中的imageResource的路径是网络路径，

这个在手机端预览是有问题的图片是需要下载的

  onShow: function () {

const that = this;

wx.downloadFile({

url: that.data.img,

success: function (res) {

console.log(res);

that.data.img = res.tempFilePath

}, fail: function (fres) {

}

})

},

canvasContext.drawImage

定义

绘制图像到画布。

参数

参数	类型	说明
imageResource	String	所要绘制的图片资源
dx	Number	图像的左上角在目标canvas上 X 轴的位置
dy	Number	图像的左上角在目标canvas上 Y 轴的位置
dWidth	Number	在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
dHeigt	Number	在目标画布上绘制图像的高度，允许对绘制的图像进行缩放
sx	Number	源图像的矩形选择框的左上角 X 坐标
sy	Number	源图像的矩形选择框的左上角 Y 坐标
sWidth	Number	源图像的矩形选择框的高度
sHeight	Number	源图像的矩形选择框的高度

有三个版本的写法：

• drawImage(dx, dy)
• drawImage(dx, dy, dWidth, dHeight)
• drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持

图片绘制，遇到的问题使用网络路径，图片电脑端可以访问，但是手机端却不可以。

console.log(name)

var that = this;

var context = wx.createCanvasContext( 'mycanvas');

var path = img;

//这个地方的图片是需要注意，图片需要下载不然，手机上不能正常显示

context.drawImage(path, 0, 0, 686, 686)

wenzi(context,name);

//绘制图片

context.draw();

//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时

setTimeout( function () {

wx.canvasToTempFilePath({

canvasId: 'mycanvas',

success: function (res) {

var tempFilePath = res.tempFilePath;

console.log(tempFilePath);

wx.setStorageSync( 'img', tempFilePath)

return tempFilePath

},

fail: function (res) {

console.log(res);

}

});

}, 200);