如果我有 base64 ex 中的影像。
資料：影像/png；base64,iVBORw0KGgoAAAANSUhEUgAABDAAwfqNRk/rjcYX PxrV/wtWqwJSTlboMgAAAABJRU5ErkJggg==
以編程方式更改過濾器（例如亮度、對比度）而不在視圖中創建任何 img 或 canvas 標簽的最快方法是什么？然后一旦更改，將其轉換回base64 url??？
uj5u.com熱心網友回復：
為此，您可以將影像放在應用了過濾器的 HTML 畫布上，然后將該畫布轉換回 base64 URL。
由于您從未將畫布添加到檔案中，因此永遠不會看到它。
這就是異步執行的方式：
這大約需要 1-10 毫秒
function applyFiltersToImage(imageURL, callBack) {
// load the image url into an image object
const image = new Image();
image.src = imageURL;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
// apply css filters here
ctx.filter = 'brightness(0.5) contrast(2)';
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// turn canvas back into a base64 image URL
callBack(canvas.toDataURL("image/png"));
}
}
如果您已經加載了 Image 實體，則可以同步執行此操作。
這是您將如何同步執行此操作：
function applyFiltersToImageSync(imageObject) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
canvas.width = imageObject.width;
canvas.height = imageObject.height;
// apply css filters here
ctx.filter = 'brightness(0.5) contrast(2)';
ctx.drawImage(imageObject, 0, 0, canvas.width, canvas.height);
//turn canvas back into a base64 image
return canvas.toDataURL("image/png");
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/454816.html
標籤：javascript 打字稿 图像处理 css 过滤器