前端
- 一份
uint8Array或uint8ClampedArray数据 uint8Array或uint8ClampedArray对应的width和height
实现功能
- 基于
uint8Array或uint8ClampedArray数据绘制图片 - 基于
uint8Array或uint8ClampedArray数据绘制可等比缩放的图片 - 基于
uint8Array或uint8ClampedArray转换生成 base64 格式图片
代码实现
- 基于
uint8Array或uint8ClampedArray数据绘制原图图片
const canvas: HTMLCanvasElement = document.createElement('canvas');
canvas.width = width
canvas.height = height
const cavansCtx: CanvasRenderingContext2D = canvas.getContext('2d');
const imgData = new ImageData(data, width, height);
/** 将原图绘制到 canvas 上 */
cavansCtx.putImageData(imgData, 0, 0);
- 基于
uint8Array或uint8ClampedArray数据绘制指定宽高的缩放图片
const canvas: HTMLCanvasElement = document.createElement('canvas');
canvas.width = width
canvas.height = height
const cavansCtx: CanvasRenderingContext2D = canvas.getContext('2d');
const imgData = new ImageData(data, width, height);
/** 将原图绘制到 canvas 上 */
cavansCtx.putImageData(imgData, 0, 0);
const canvas2: HTMLCanvasElement = document.createElement('canvas');
const cavans2Ctx: CanvasRenderingContext2D = canvas2.getContext('2d');
/** 基于原图的 canvas 绘制到另一个画布 canvas2 中 */
canvas2Ctx.value.drawImage(canvas, 0, 0, targetWidth, targetHeight);
由于
putImageData只能裁剪图片宽高，不能等比缩放；drawImage可以进行裁剪和缩放；因为drawImage只支持CSSImageValue(en-US)，HTMLImageElement，SVGImageElement(en-US)，HTMLVideoElement，HTMLCanvasElement，ImageBitmap或者OffscreenCanvas，所以只能通过canvas来充当一个替代角色
- 基于
uint8Array或uint8ClampedArray转换生成 base64 格式图片
const canvas: HTMLCanvasElement = document.createElement('canvas');
canvas.width = width
canvas.height = height
const cavansCtx: CanvasRenderingContext2D = canvas.getContext('2d');
const imgData = new ImageData(data, width, height);
/** 将原图绘制到 canvas 上 */
cavansCtx.putImageData(imgData, 0, 0);
const base64 = cavans.toDataURL('image/jpeg', 1.0);
