Skip to content

Instantly share code, notes, and snippets.

@mauriciomassaia
Created March 20, 2018 07:15
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mauriciomassaia/b9e7ef6667a622b104c00249f77f8c03 to your computer and use it in GitHub Desktop.
Save mauriciomassaia/b9e7ef6667a622b104c00249f77f8c03 to your computer and use it in GitHub Desktop.
ImageData resize on Canvas
export async function resizeImageData (imageData, width, height) {
const resizeWidth = width >> 0
const resizeHeight = height >> 0
const ibm = await window.createImageBitmap(imageData, 0, 0, imageData.width, imageData.height, {
resizeWidth, resizeHeight
})
const canvas = document.createElement('canvas')
canvas.width = resizeWidth
canvas.height = resizeHeight
const ctx = canvas.getContext('2d')
ctx.scale(resizeWidth / imageData.width, resizeHeight / imageData.height)
ctx.drawImage(ibm, 0, 0)
return ctx.getImageData(0, 0, resizeWidth, resizeHeight)
}
@deepuRai
Copy link

Thank you. It worked really well :)

@mauriciomassaia
Copy link
Author

Thank you. It worked really well :)

Im glad it helped :)

@fuyongshuai7
Copy link

thanks you, it's help to me

@Hyodori04
Copy link

thanks it's good. But why you used bit operator? Is it faster than not using?

@mauriciomassaia
Copy link
Author

@Hyodori04 in this case the bit operator is the same as Math.floor(value / 2). The bit operator is faster but in this case its was just to reduce the amount of code.

For more details check this MDN link

@Hyodori04
Copy link

@mauriciomassaia thanks for quick answer. I understand what you mean

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment