The createImageBitmap of WindowOrWorkerGlobalScope for JS takes image, which can be an img element, an SVG image element, a video element, a canvas element, a Blob object, an ImageData object, or another ImageBitmap object, and returns a promise that is resolved when a new ImageBitmap is created.
If no ImageBitmap object can be constructed, for example because the provided image data is not actually an image, then the promise is rejected instead.
If sx, sy, sw, and sh arguments are provided, the source image is cropped to the given pixels, with any pixels missing in the original replaced by transparent black. These coordinates are in the source image's pixel coordinate space, not in CSS pixels.
If options is provided, the ImageBitmap object's bitmap data is modified according to options. For example, if the premultiplyAlpha option is set to "premultiply", the bitmap data's color channels are premultiplied by its alpha channel.
Rejects the promise with an "InvalidStateError" DOMException if the source image is not in a valid state (e.g., an img element that hasn't loaded successfully, an ImageBitmap object whose [[Detached]] internal slot value is true, an ImageData object whose data attribute value's [[ViewedArrayBuffer]] internal slot is detached, or a Blob whose data cannot be interpreted as a bitmap image).
Rejects the promise with a "SecurityError" DOMException if the script is not allowed to access the image data of the source image (e.g. a video that is CORS-cross-origin, or a canvas being drawn on by a script in a worker from another origin).
promise = self.createImageBitmap(image [, options ])
promise = self.createImageBitmap(image, sx, sy, sw, sh [, options ]) An img element, an SVG image element, a video element, a canvas element, a Blob object, an ImageData object, or another ImageBitmap object.
Allows setting imageOrientation, premultiplyAlpha, colorSpaceConvertion, resizeWidth, resizeHeight, and resizeQuality.
imageOrientation The image orientations: from-image and flipY.
premultiplyAlpha The premultiply alphas: none, premultiply, and default.
colorSpaceConvertion The color space conversions: none and default.
resizeWidth The resize width.
resizeHeight The resize height.
resizeQuality The resize qualities: pixelated, low, medium, and high.
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const promise1 = self.createImageBitmap(image, 0, 0, 100, 50);
const promise2 = self.createImageBitmap(image, 100, 50, 100, 50);
const promise3 = self.createImageBitmap(image, 200, 100, 100, 50);
const myarray =
[
promise1,
promise2,
promise3
];
const promise = Promise.all(myarray);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter[0], 0, 0);
mycontext.drawImage(myparameter[1], 100, 50);
mycontext.drawImage(myparameter[2], 200, 100);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
imageOrientation: "from-image"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
imageOrientation: "flipY"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
premultiplyAlpha: "none"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
premultiplyAlpha: "premultiply"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
premultiplyAlpha: "default"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
colorSpaceConvertion: "none"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
colorSpaceConvertion: "default"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
resizeWidth: 600
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
resizeHeight: 300
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
resizeQuality: "pixelated"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
resizeQuality: "low"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
resizeQuality: "medium"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<script>
function myfunction1()
{
const sx = 0;
const sy = 0;
const sw = 300;
const sh = 150;
const options =
{
resizeQuality: "high"
};
const promise = self.createImageBitmap(image, sx, sy, sw, sh, options);
promise.then(myfunction2);
}
function myfunction2(myparameter)
{
const mycanvas = document.createElement("canvas");
document.body.append(mycanvas);
const dx = 0;
const dy = 0;
const mycontext = mycanvas.getContext("2d");
mycontext.drawImage(myparameter, dx, dy);
}
const image = new Image();
image.src = "/assets/svg/1.svg";
image.addEventListener("load", myfunction1);
</script>
</body>
</html>