canvas .drawImage
时间: 2023-11-10 09:56:08 浏览: 41
canvas.drawImage()方法用于在画布上绘制图像。该方法有多种形式,具体取决于传入的参数。下面是几种常见的用法:
1. drawImage(image, dx, dy, dw, dh)
这个方法在画布的指定位置上按原图大小绘制指定大小的图像。其中,image表示要绘制的图像,dx和dy表示图像在画布上的位置,dw和dh表示绘制的图像的宽度和高度。
2. drawImage(image, dx, dy)
这个方法在画布的指定位置绘制原图像。其中,image表示要绘制的图像,dx和dy表示图像在画布上的位置。
3. drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
这个方法用于剪切图像,并在画布上定位被剪切的部分。其中,image表示要绘制的图像,sx和sy表示要剪切的图像的起始点坐标,sw和sh表示要剪切的图像的宽度和高度,dx和dy表示剪切后的图像在画布上的位置,dw和dh表示绘制的图像的宽度和高度。
相关问题
canvas.drawimage方法参数说明图
canvas.drawImage方法是HTML5中绘制图像的API之一。该方法有九个参数,分别是:图片源、绘制的位置、绘制的尺寸、剪切的部分。
图片源参数指的是要绘制的图像对象,可以是`<img>`标签、`<canvas>`标签或者一个图片URL。
绘制的位置参数是指图像在画布上的起始坐标,可以是一个数值或者两个数值的数组。如果只有一个数值,则表示从画布的左上角绘制图像的起始点;如果有两个数值,则分别表示横向和纵向的起始坐标。
绘制的尺寸参数是指图像在画布上的缩放尺寸,可以是一个数值或者两个数值的数组。如果只有一个数值,则表示图像在横向和纵向上的缩放比例相同;如果有两个数值,则分别表示横向和纵向的缩放比例。
剪切的部分参数是一个四个数值的数组,分别表示要绘制图像的起始剪切点的坐标和剪切的矩形区域的宽度和高度。剪切的作用是只绘制图像的一部分区域,可以实现图像的切片效果。
总结来说,canvas.drawImage方法的参数依次是要绘制的图像源、绘制的位置、绘制的尺寸和剪切的部分。通过这些参数的设置,可以实现对图像在画布上的定位、缩放以及剪切操作,从而实现各种图像绘制效果。
在uniapp中nvue页面let canvas = uni.createCanvasContext('firstCanvas') canvas.drawImage(video, 0, 0, width, height) // 绘制canvas const dataURL = canvas.toDataURL('image/jpeg')没有toDataURL()这个方法怎办
如果在nvue页面中没有toDataURL()方法,可以尝试使用uniImagePicker组件,选择一张图片作为画布,然后使用canvas的drawImage()方法将视频截图绘制到画布上,最后使用canvas的toTempFilePath()方法生成图片文件路径。示例代码如下:
```
<template>
<view>
<view class="canvas-wrapper">
<image
ref="image"
mode="aspectFill"
class="canvas-image"
:src="canvasImage"
/>
<canvas
ref="canvas"
class="canvas"
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
canvas-id="firstCanvas"
/>
</view>
<button @click="captureImage">截图</button>
</view>
</template>
<script>
export default {
data() {
return {
canvasWidth: 300,
canvasHeight: 300,
canvasImage: '',
}
},
methods: {
captureImage() {
const ctx = uni.createCanvasContext('firstCanvas', this)
const { width, height } = this.$refs.image
ctx.drawImage(this.$refs.image, 0, 0, width, height)
// 绘制视频截图
// const video = uni.createVideoContext('video', this)
// video.pause()
// ctx.drawImage(video, 0, 0, width, height)
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
canvasId: 'firstCanvas',
fileType: 'jpg',
quality: 1,
success: (res) => {
this.canvasImage = res.tempFilePath
},
},
this
)
})
},
},
}
</script>
<style>
.canvas-wrapper {
position: relative;
width: 300px;
height: 300px;
}
.canvas-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
```
需要注意的是,使用uniImagePicker组件选择图片时,返回的是图片的本地路径,需要使用uni.getImageInfo()方法获取图片的宽高信息。如果要绘制视频截图,可以使用uni.createVideoContext()方法获取视频上下文对象,然后调用pause()方法暂停视频播放,最后使用drawImage()方法将视频截图绘制到画布上即可。