如何使用Javascript画布API将图像转换为素描图像
嗨，所以我试着在上传到服务器之前把图像转换成素描图像，上传部分不是问题，图像到素描图像的转换是。我没有搜索一个js库来帮助我实现这一点，然后我在python中找到了这个python示例代码，然后尝试只使用CSS重新创建它，并且我使用下面的CSS代码正确地获得了它。
filter: grayscale(100%) invert(100%) blur(5px);
mix-blend-mode: color-dodge;然后，我尝试用画布API在Vanilla Javascript中重新创建它，因为我需要将图像上传到服务器上，该服务器看起来像草图一样的图像，但是被困在进程中，这里是我正在做的下面的图像转换的阶段。
我被困在了第4阶段，我无法继续进行第5阶段，当彩色道奇应用于画布API时，它是globalCompositeOperation = 'color-dodge';，以消除模糊，使其看起来像素描图像。
- 阶段1是原始图像
- 阶段2是在javascript CANVAS API中工作的
grayscale(100%) - 第3阶段是
invert(100%)在javascript CANVAS API
H 116第4阶段是<>D17工作在javascript画布API<代码>H 218<代码>H 119第5阶段<代码>D20，这相当于CSS‘<代码>D 21我认为？我不确定，但我想是的。在javascript CANVAS API中不工作
下面是我的Javascript代码
let img = document.createElement('img');
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
ctx.filter = 'grayscale(100%) invert(100%) blur(5px)'; // stages 2,3,4 is working
ctx.globalCompositeOperation = 'color-dodge'; // stage 5 not working
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);好的，我想这是很多，所以这里有一个片段，供你们测试。https://codepen.io/ohyeahhu/pen/MWQRweP
此外，如果你们知道一个JS库或工具，可能会帮助我实现这一壮举，我是非常开放的任何建议。
注意:仅在javascript或任何js库中
回答 1
Stack Overflow用户
发布于 2022-11-25 16:41:24
在这里为其他人发布它，解决方案是我需要生成一个黑白和模糊的画布/img，然后使用CANVAS合并它们。
因此，为了总结下面的代码，我创建了两个函数。filter和generateSketch，filter的目的是向画布元素添加过滤器，而generateSketch则将两个画布(黑白和模糊)合并为一个，以创建一个类似于图像的草图。
HTML
<div class="col-sm-6">
<h1 class="text-center">Converted using JAVASCRIPT</h1>
<div class="row">
<div class="col-sm-6">
<img src="https://i.postimg.cc/Wb5CcD8L/corgi2.jpg" id="raw-img" class="d-block w-100">
</div>
<div class="col-sm-6" id="result">
</div>
</div>
</div>Javascript
window.addEventListener('DOMContentLoaded', async (event) => {
// add filters to canvas element
const filter = (bmp, filters="") => {
let canvas = Object.assign(document.createElement('canvas'), { width: bmp.width, height: bmp.height });
let ctx = canvas.getContext('2d');
ctx.filter = filters;
ctx.drawImage(bmp, 0, 0);
return canvas;
}
// merge two canvas into one to generate sketch like image
const generateSketch = (bnw, blur) => {
let canvas = document.createElement('canvas');
canvas.width = bnw.width;
canvas.height = bnw.height;
canvas.__skipFilterPatch = true; // davidenke/context-filter-polyfill fix for safari ios devices
let ctx = canvas.getContext('2d');
ctx.drawImage(bnw, 0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'color-dodge';
ctx.drawImage(blur, 0, 0, canvas.width, canvas.height);
return canvas;
}
let rawImg = document.getElementById('raw-img');
// first: step create bitmap from the `rawImg`
let bmp = await createImageBitmap(rawImg);
// second: generate a black & white and blur canvas using filter()
let bnw = filter(bmp, "grayscale(1)");
let blur = filter(bmp, "grayscale(1) invert(1) blur(5px)");
// third: merge / combine `bnw` and `blur` canvas
let sketchImg = generateSketch(bnw, blur);
// display output
let resultDiv = document.getElementById('result');
resultDiv.prepend(sketchImg);
});您可以在我的代码页上查看工作示例https://codepen.io/ohyeahhu/pen/MWQRweP。
注意:我还使用https://github.com/davidenke/context-filter-polyfill来解决Safari设备上的兼容性问题。
这也与这个CanvasRenderingContext2D.globalCompositeOperation is not working on safari相关。
https://stackoverflow.com/questions/72664200
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号