在将画布呈现为张量之前,您正在画布上绘制图像。在画布上绘制可以改变初始图像的形状。例如,除非另有规定(代码就是这样),否则画布的创建宽度为300 px,高度为150 px。因此张量的结果形状或多或少类似于下面的[150,300,3]。
1 -使用画布
画布适合调整图像的大小,因为可以在画布上绘制初始图像的全部或部分。在这种情况下,需要调整画布的大小。
const canvas = document.create('canvas')
// canvas has initial width: 300px and height: 150px
canvas.width = image.width
canvas.height = image.heigth
// canvas is set to redraw the initial image
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0) // to draw the entire image
不过,有一点要注意:以上所有操作都应该在使用事件处理程序加载完图像之后执行。
onload
如下所示
const im = new Image()
im.crossOrigin = 'anonymous'
im.src = 'url'
// document.body.appendChild(im) (optional if the image should be displayed)
im.onload = () => {
const canvas = document.create('canvas')
canvas.width = image.width
canvas.height = image.heigth
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0)
}
或者使用异步/等待
function load(url){
return new Promise((resolve, reject) => {
const im = new Image()
im.crossOrigin = 'anonymous'
im.src = 'url'
im.onload = () => {
resolve(im)
}
})
}
// use the load function inside an async function
(async() => {
const image = await load(url)
const canvas = document.create('canvas')
canvas.width = image.width
canvas.height = image.heigth
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0)
})()
2-直接在图像上使用frompixel
如果图像不需要调整大小,可以使用
fromPixel
在图像本身