离屏Canvas(Offscreencanvas) + web Worker 优化多张图片旋转角度

一、Offscreencanvas简介

据 developer.mozilla.org中描述 OffscreenCanvas 是一个实验中的功能，提供了一个可以脱离屏幕渲染的canvas对象,可在web worker的环境下进行绘制渲染。也就是说OffscreenCanvas可以在Worker中进行图片操作，且不会阻塞主线程。

二、本次场景描述

需要多张图片进行任意角度旋转，如果在普通的 canvans下进行任意角度旋转图片量多了会感觉页面有明显的卡顿感，特别是在canvas.toDataUrl('image/webp')里面加入类型的时候，这会让你会觉得一切都停止了……
如下：

async function rotateImageAngle() {
  let canvas = document.createElement('canvas');
  let context = canvas.getContext('2d');
  // 获取所有图片资源这里有5张
  const arrayOfImageElements = await getAllImage();
  arrayOfImageElements.forEach((imgObj) => {
    let img= imgObj;
    // 这里假设图片旋转360度每个角度都需要一张图片，那么现在就会生成1800张图片
    for (let i = 0; i <= 360; i++) {
      let rotate = i;
      canvas.width = img.width;
      canvas.height = img.height;
      context.clearRect(0, 0, canvas.width, canvas.height);
      if (rotate === 90 || rotate === 270) {
        context.translate(img.height / 2, img.width / 2);
      } else {
        context.translate(img.width / 2, img.height / 2);
      }
      context.rotate(rotate * Math.PI / 180);
      context.drawImage(img, -img.width / 2, -img.height / 2);
      // 打印出 base64
      console.log(canvas.toDataURL('image/webp'))
    }
    canvas.remove();
  });
}

async function getAllImage() {
  const imgUrls = buildImageUrls();
  let arrayOfImages = [];
  await Promise.all(imgUrls.map(loadImageAsync))
    .then(arrayOfImageElements => {
      arrayOfImages = arrayOfImageElements;
    });
  return arrayOfImages;
}
function buildImageUrls() {
 // 这里有5张图片
  const names = ['q', 'w', 'e', 'r','t'];
  return names .map(name => {
    return `./assets/image/${name}.webp`;
  });
}
function loadImageAsync(imageUrl) {
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.src = imageUrl;
    // 跨域支持
    img.crossOrigin = 'Anonymous';
    img.onload = () => resolve(img);
    img.onerror = reject;
  });
}

执行上面代码不出意外的话页面会卡死了一段时间。 那么如果采用 OffscreenCanvas + web Worker会不会好些呢？嗯…… 那就接着往下面看吧！

三、Offscreencanvas 优化图片绘制

上代码：

1. 主线程

       const arrayOfImageElements = await getAllImage();
       // 创建一个 Worker, 并指定的脚本。
       let worker = new Worker('../assets/js/imageProcess.js');
       worker.onmessage = ({data}) => {
           // 这里接收Worker线程传来的base64图片
          console.log(data)
       };
       worker.postMessage({data: arrayOfImageElements});
       // 因为在web Worker中不支持dom的操作，所以所有的图片都转成blob再传入，其余的都和上面一样
      function loadImageAsync(imageUrl) {
        return new Promise((resolve, reject) => {
           fetch(imageUrl)
               .then((response) => {
               return response.blob();
            }) .then((blob) => {
               resolve(blob);
               });
           });
       }
   

2. 脚本imageProcesss.js

   let ctx = self;
   ctx.addEventListener('message', ({data}) => {
   let arrayOfImageElements = data.data;
   // 这里就是用到OffscreenCanvas的地方了,画布大小我这里写死了
   let width=100;
   let height=100;
   let canvas = new OffscreenCanvas(width, height);
   let context = canvas.getContext('2d');
   // 还是和前面一样1800张图片,5*360
   const anglePictures = 360;
   arrayOfImageElements.forEach((imageObj) => {
       // 因为worker中不支持dom 所以传入blob,然后把blob转换成 ImageBitmap，再对ImageBitmap进行操作。
       ctx.createImageBitmap(imageObj).then((imageBitmap) => {
       for (let i = 0; i <= anglePictures; i++) {
           let rotate = i;
           canvas.width = width;
           canvas.height = height;
           context.clearRect(0, 0, canvas.width, canvas.height);
           if (rotate === 90 || rotate === 270) {
           context.translate(height / 2, width / 2);
           } else {
           context.translate(width / 2, height / 2);
           }
           context.rotate(rotate * Math.PI / 180);
           context.drawImage(imageBitmap, -width / 2, -height / 2);
           // OffscreenCanvas 没有 toDataURL('image/webp') 方法
           canvas.convertToBlob({type: 'image/webp'}).then((blob) => {
           const reader = new FileReader();
           reader.readAsDataURL(blob);
           return new Promise(resolve => {
               reader.onloadend = () => {
               resolve(reader.result);
               };
           });
           }).then((base64) => {
               // 把取到的base64 传给主线程
               ctx.postMessage(base64)
           })
       }
       });
       })
   });
   
   

以上就是 Offscreencanvas 对旋转图片优化。

the end enjoy!