用js實現(xiàn)圖片旋轉(zhuǎn)的兩種方案

更新時間：2023年07月19日 08:38:59 作者：Lewin.Lin

這篇文章主要給大家介紹了關(guān)于用js實現(xiàn)圖片旋轉(zhuǎn)的兩種方案, 旋轉(zhuǎn)的效果就是根據(jù)鼠標的的移動距離來顯示不同的圖片,形成視覺差,仿佛就是在正真的旋轉(zhuǎn),需要的朋友可以參考下

一、圖片旋轉(zhuǎn)的方案介紹

1、用css的rotate與translate實現(xiàn)

2、用js的canvas實現(xiàn)

二、方案1的缺陷

用css的rotate方案來實現(xiàn)的時，如果圖片是長方形，則圖片左側(cè)會有空白區(qū)域。如果要用translate來實現(xiàn)向左平移時，可以解決左側(cè)留白問題。但是當圖片旋轉(zhuǎn)后再顯示時，寬度可能超出父盒子的寬度，致使效果無法達到預期。

三、canvas實現(xiàn)圖片旋轉(zhuǎn)

<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，旋轉(zhuǎn)圖片后，返回一個圖片信息對象
    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('旋轉(zhuǎn)角度必須是90的倍數(shù)!');
        throw '旋轉(zhuǎn)角度必須是90的倍數(shù)!';
      }
      edg < 0 && (edg = (edg % 360) + 360);
      const quadrant = (edg / 90) % 4; //旋轉(zhuǎn)象限
      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() 復制畫布上指定矩形的像素數(shù)據(jù)
        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() 將圖像數(shù)據(jù)放回畫布
        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 策略，會存在跨域問題，雖然可以使用圖像（比如append到頁面上）但是繪制到畫布上會污染畫布，一旦一個畫布被污染,就無法提取畫布的數(shù)據(jù)，比如無法使用使用畫布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) => {})中，只能旋轉(zhuǎn)90度，180度、270度等能夠被90整除的度數(shù)。