html5自动缩放图片,html5图像旋转、缩放并上传

普通 css 的旋转缩放只是样式发生旋转，图片本质上还是没有旋转缩放的，想要图片本质旋转或者缩放，需要借助 canvas 的图像生成能力

以图像旋转 90 度并且缩放 0.5 倍为例

思路获取图片元素(对象)，这里也可以处理视频(video)

构建画布，画布的宽高分别为图像或者视频的真实高宽

移动画布原点为原图的(高度,0)

旋转画布 90 度

缩放画布 0.5 倍

将原图画到画布上

将画布转成 Blob 对象传到服务器

代码

Document

ok

function handle() {

// 1. 获取图片元素(对象)，这里也可以处理视频(video)

const img = document.getElementById("img");

// 2. 构建画布，画布的`宽高`分别为图像或者视频的真实`高宽`

const canvas = document.getElementById("canvas");

// 如果是视频 则video.videoWidth和videoHeight

canvas.width = img.naturalHeight * 0.5; // 乘以0.5是为了缩放

canvas.height = img.naturalWidth * 0.5;

const ctx = canvas.getContext("2d");

// 3. 移动画布原点为原图的(高度,0)

ctx.translate(canvas.height, 0);

// 4. 旋转画布90度

const angle = (90 * Math.PI) / 180;

ctx.rotate(angle);

// 5. 缩放画布0.5倍

ctx.scale(0.5, 0.5);

// 6. 将原图画到画布上

ctx.drawImage(img, 0, 0);

// 7. 将画布转成Blob对象传到服务器

const fd = new FormData();

canvas.toBlob(function (blob) {

// img.src = URL.createObjectURL(blob)

fd.append("img1", blob);

// 上传接口

fetch("/api/up", {

method: "POST",

body: fd,

});

});

}