1. 画像回転の仕組みの紹介
1. cssの回転と平行移動で実現
2. jsのcanvasで実現
2. スキーム 1 の欠陥
CSSの回転スキームを使用すると、画像が長方形の場合、画像の左側に空白の領域ができます。翻訳を使用して左への翻訳を実現したい場合は、左の空白の問題を解決できます。ただし、画像を回転して表示すると、親ボックスの幅を超えてしまい、期待どおりの効果が得られない場合があります。
3. 画像の回転を実現するCanvas
<template>
<div style="width: 100%; height: 100%">
<img class="img-item" src="https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666" />
<img class="img-item" src="https://img0.baidu.com/it/u=2911164322,2998857390&fm=253&fmt=auto&app=138&f=JPEG?w=346&h=500" />
</div>
</template>
<script>
export default {
name: "deviceAssets",
data() {
return {
}
},
mounted() {
this.initPage()
},
methods: {
initPage() {
this.$nextTick(async() => {
let imgList = document.getElementsByClassName("img-item")
if (!imgList) return
for(let i=0; i < imgList.length; i++) {
this.rotateBase64Img(imgList[i].src, 90, (url) => {
console.log(`imgList[${
i}].src`, url)
imgList[i].src = url
})
}
})
},
// 传入图片src，旋转图片后，返回一个图片信息对象
rotateBase64Img(src, edg, callback) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgW; //图片宽度
var imgH; //图片高度
var size; //canvas初始大小
if (edg % 90 != 0) {
console.error('旋转角度必须是90的倍数!');
throw '旋转角度必须是90的倍数!';
}
edg < 0 && (edg = (edg % 360) + 360);
const quadrant = (edg / 90) % 4; //旋转象限
const cutCoor = {
sx: 0, sy: 0, ex: 0, ey: 0 }; //裁剪坐标
var image = new Image();
image.crossOrigin = 'anonymous';
image.src = src;
image.onload = function () {
console.log('加载了');
imgW = image.width;
imgH = image.height;
size = imgW > imgH ? imgW : imgH;
canvas.width = size * 2;
canvas.height = size * 2;
switch (quadrant) {
case 0:
cutCoor.sx = size;
cutCoor.sy = size;
cutCoor.ex = size + imgW;
cutCoor.ey = size + imgH;
break;
case 1:
cutCoor.sx = size - imgH;
cutCoor.sy = size;
cutCoor.ex = size;
cutCoor.ey = size + imgW;
break;
case 2:
cutCoor.sx = size - imgW;
cutCoor.sy = size - imgH;
cutCoor.ex = size;
cutCoor.ey = size;
break;
case 3:
cutCoor.sx = size;
cutCoor.sy = size - imgW;
cutCoor.ex = size + imgH;
cutCoor.ey = size + imgW;
break;
}
ctx?.translate(size, size);
ctx?.rotate((edg * Math.PI) / 180);
//drawImage向画布上绘制图片
ctx?.drawImage(image, 0, 0);
//getImageData() 复制画布上指定矩形的像素数据
var imgData = ctx?.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
if (quadrant % 2 == 0) {
canvas.width = imgW;
canvas.height = imgH;
} else {
canvas.width = imgH;
canvas.height = imgW;
}
//putImageData() 将图像数据放回画布
ctx?.putImageData(imgData, 0, 0);
callback(canvas.toDataURL('image/png'));
};
}
}
}
</script>
<style lang="scss" scoped>
.iframe {
width: 98%;
height: 98%;
box-sizing: border-box;
}
.img-box {
width: 700px;
height: 700px;
background-color: #ccc;
.img {
width: 100%;
transform: rotateZ(90deg) ;
}
}
</style>
注:
1. image.crossOrigin = 'anonymous' は省略できません。
// CORS ポリシーによって制限されているため、クロスドメインの問題が発生します。画像は使用できますが (ページへの追加など)、キャンバス上に描画するとキャンバスが汚染されます。キャンバスが汚染されると、キャンバスのデータが失われます。たとえば、抽出できません。使用できません。 Canvas toBlob() 、 toDataURL() 、または getImageData() メソッドを使用します。
2. Canvas.toDataURL('image/png')
// image/jpegに変更すると画像サイズが小さくなります。画像タイプは画像サイズに影響します。たとえば、元の画像サイズが 500kb の場合、image/png が渡されると、画像は 5MB になり、image/jpeg は約 500kb にしかならない可能性があります。
3. This.rotateBase64Img(imgList[i].src, 90, (url) => {}) は、90 度、180 度、270 度、および 90 で割り切れるその他の度のみ回転できます。
4.効果
はい、完了しました〜
お役に立った場合は、「いいね！」をお願いします。ありがとう~~