微信小程序开发工具导入图片

微信小程序作为一种轻量级应用程序，已经成为了现在很多场景下的标配，开发人员通过使用微信小程序开发工具可以很方便地搭建和开发自己的小程序应用。在开发中，导入图片是非常常见的需求之一，下面将对微信小程序开发工具导入图片的原理和详细介绍进行探讨。

一、原理介绍

微信小程序开发工具导入图片的原理是，开发人员可以将图片文件放到小程序项目文件夹中，然后使用wx.getImageInfo()方法读取图片信息，并使用wx.drawImage()方法将图片绘制到画布上。具体流程如下：

1. 图片文件放置：将图片文件放置到小程序项目文件夹中，例如，将图片文件放在项目文件夹中的images目录下。

2. 读取图片信息：使用wx.getImageInfo()方法读取图片信息，该方法的参数为图片文件路径，例如，读取images目录下的图片文件信息：

```

wx.getImageInfo({

src: '/images/my-image.jpg',

success: function(res) {

console.log(res.width)

console.log(res.height)

}

})

```

这里，res参数返回图片的信息，包括宽度、高度、路径等等。

3. 绘制图片：使用wx.drawImage()方法将图片绘制到画布上，该方法需要传入canvas实例、图片文件路径、绘制的位置等等参数。例如，将图片绘制到canvas画布的左上角：

```

var canvas = wx.createCanvasContext('myCanvas')

canvas.drawImage('/images/my-image.jpg', 0, 0)

canvas.draw()

```

二、详细介绍

1.图片文件放置

在微信小程序开发工具中，将图片文件放置到项目文件夹中的过程可以参考以下步骤：

（1）在项目文件栏中，单击鼠标右键，选择“新建文件夹”，新建一个名为“images”的文件夹。

（2）将需要导入的图片文件直接拖拽到images文件夹下。

(3) 调用函数，获取图片路径，例如：

```

getImg(e){

let that = this;

wx.chooseImage({

success(res) {

var tempFilePaths = res.tempFilePaths;

wx.showToast({

title: '上传中',

icon: 'loading',

mask:true,

duration: 1000

});

wx.uploadFile({

url: app.globalData.url+'/api/common/upload',

filePath: tempFilePaths[0],

name: 'file',

success(res) {

console.log(res)

let img = JSON.parse(res.data)

console.log(img)

that.setData({

imgSrc: img.data.file_path,

hidden:true

})

wx.setStorageSync('img',img.data.file_path)

},

fail(res){

console.log(res)

setTimeout(function(){

wx.showModal({

title: '提示',

content:'网络错误，请稍后再试',

showCancel: false,

})

},1000)

}

})

},

fail(res){

console.log(res)

}

})

},

```

上述示例代码中，我们通过调用wx.chooseImage()方法，可以让用户选择图片文件并将其上传。上传成功后，我们可以从res参数中获取到图片的临时路径tempFilePaths，然后调用wx.uploadFile()方法将图片文件上传到指定服务器上，uploadFile方法的success回调函数中可以拿到服务器返回的图片路径img.data.file_path，这里我们将图片路径存储在小程序中缓存中，并使用setData()方法将imgSrc属性设置为图片路径。

2.读取图片信息

在微信小程序开发工具中，读取图片信息的过程可以参考以下步骤：

（1）在需要读取图片信息的js文件中，使用wx.getImageInfo()方法读取图片信息，例如：

```

wx.getImageInfo({

src: '/images/my-image.jpg',

success: function(res) {

console.log(res.width)

console.log(res.height)

}

})

```

（2）在方法的success函数中，可以获取到图片的信息，例如宽度和高度。

3.绘制图片

在微信小程序开发工具中，将图片绘制到画布上的过程可以参考以下步骤：

（1）在需要绘制图片的js文件中，创建一个canvas实例对象，例如：

```

var canvas = wx.createCanvasContext('myCanvas')

```

（2）使用wx.drawImage()方法将图片绘制到画布上，例如：

```

canvas.drawImage('/images/my-image.jpg', 0, 0)

```

（3）调用canvas.draw()方法将绘制的结果显示到画布上，例如：

```

canvas.draw()

```

(4) 整个示例代码：

```

canvasDraw: function () {

let that = this;

//新建canvas对象

var avatarTeam = wx.createCanvasContext('avatarTeam');

//canvas接口函数——drawImage()将图片文件绘制到画布上

avatarTeam.drawImage(that.data.imgSrc, 10, 10, 180, 180);

/canvas接口函数——draw()把之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

avatarTeam.draw()

},

```

三、总结

以上就是微信小程序开发工具导入图片的原理和详细介绍，开发人员可以将图片文件放到小程序项目文件夹中，然后通过wx.getImageInfo()方法读取图片信息，并使用wx.drawImage()方法将图片绘制到画布上。在开发微信小程序时，导入图片是一个非常常见的需求，掌握导入图片的方法和技巧，可以帮助开发人员更加高效地完成工作。