一、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 优化图片绘制
上代码：
-
主线程
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); }); }); } -
脚本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 对旋转图片优化。
