<div>
targetX =
<input type="number" min="0" max="2" step="1" value="1" oninput="onTargetXChange(arguments[0])" />
</div>
<div>
targetY =
<input type="number" min="0" max="2" step="1" value="1" oninput="onTargetYChange(arguments[0])" />
</div>
<div>
divisor =
<input id="divisor" type="number" min="0.1" max="100" step="0.1" value="1" oninput="onDivisorChange(arguments[0])" />
</div>
<div>
bias =
<input type="number" min="0" max="100" step="0.1" value="0" oninput="onBiasChange(arguments[0])" />
</div>
<div>
preserveAlpha =
<label><input type="radio" name="preserveAlpha" value="true" onchange="onPreserveAlphaChange(arguments[0])" />true</label>
<label><input type="radio" name="preserveAlpha" value="false" checked onchange="onPreserveAlphaChange(arguments[0])" />false</label>
</div>
<div>
edgeMode =
<label><input type="radio" name="edgeMode" value="none" checked onchange="onEdgeModeChange(arguments[0])" />none</label>
<label><input type="radio" name="edgeMode" value="duplicate" onchange="onEdgeModeChange(arguments[0])" />duplicate</label>
<label><input type="radio" name="edgeMode" value="wrap" onchange="onEdgeModeChange(arguments[0])" />wrap</label>
</div>
<div style="display: flex;">
kernelMatrix =
<table border style="margin-left: 10px;">
<tr>
<td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
<td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
<td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
</tr>
<tr>
<td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
<td><input class="matrix_values" type="number" value="-14" step="1" oninput="onKernelMatrixChange()" /></td>
<td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
</tr>
<tr>
<td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
<td><input class="matrix_values" type="number" value="1" step="1" oninput="onKernelMatrixChange()" /></td>
<td><input class="matrix_values" type="number" value="8" step="1" oninput="onKernelMatrixChange()" /></td>
</tr>
</table>
</div>
<div>
预设滤镜:
<label><input type="radio" name="presetFilter" value="1 1 1 1 -14 1 1 1 8" checked onchange="onPresetChange(arguments[0])" />浮雕</label>
<label><input type="radio" name="presetFilter" value="0 -3 0 -2 15 -4 0 -5 0" onchange="onPresetChange(arguments[0])" />纸片化</label>
<label><input type="radio" name="presetFilter" value="6 8 7 1 0 1 1 1 8" onchange="onPresetChange(arguments[0])" />模糊</label>
<label><input type="radio" name="presetFilter" value="0 2 0 -2 15 -4 0 -5 0" onchange="onPresetChange(arguments[0])" />锐利清晰</label>
</div>
<br>
<svg width="800" height="300" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myFilter" x="0" y="0" width="100%" height="100%">
<feConvolveMatrix id="feConvolveMatrix" order="3" kernelMatrix="1 1 1 1 -14 1 1 1 8" targetX="1" targetY="1" edgeMode="none" />
</filter>
</defs>
<image href="https://webdav.iflyit.top/share/图片/flower-1.jpg" x="0" y="0" width="400" height="300"" />
<image x=" 401" href="https://common-1301829111.cos.ap-shanghai.myqcloud.com/img%2Fflower-1.jpg" x="0" y="0" width="400" height="300" filter="url(#myFilter)" />
</svg>
function onTargetXChange(e) {
const feConvolveMatrix = document.getElementById("feConvolveMatrix");
feConvolveMatrix.setAttribute("targetX", e.target.value);
}
function onTargetYChange(e) {
const feConvolveMatrix = document.getElementById("feConvolveMatrix");
feConvolveMatrix.setAttribute("targetY", e.target.value);
}
function onDivisorChange(e) {
const feConvolveMatrix = document.getElementById("feConvolveMatrix");
feConvolveMatrix.setAttribute("divisor", e.target.value);
}
function onBiasChange(e) {
const feConvolveMatrix = document.getElementById("feConvolveMatrix");
feConvolveMatrix.setAttribute("bias", e.target.value);
}
function onPreserveAlphaChange(e) {
const feConvolveMatrix = document.getElementById("feConvolveMatrix");
feConvolveMatrix.setAttribute("preserveAlpha", e.target.value);
}
function onEdgeModeChange(e) {
const feConvolveMatrix = document.getElementById("feConvolveMatrix");
feConvolveMatrix.setAttribute("edgeMode", e.target.value);
}
function onKernelMatrixChange() {
const matrix_values_inputs = document.getElementsByClassName("matrix_values");
let values = "";
for (let index = 0; index < matrix_values_inputs.length; ++index) {
values += matrix_values_inputs[index].value;
if (index !== matrix_values_inputs.length - 1) {
values += " ";
}
}
const feConvolveMatrix = document.getElementById("feConvolveMatrix");
feConvolveMatrix.setAttribute("kernelMatrix", values);
console.log(feConvolveMatrix.getAttribute("kernelMatrix"));
const defaultDivisor = values.split(" ").reduce((pre, val) => pre + +val, 0);
feConvolveMatrix.setAttribute("divisor", defaultDivisor);
document.getElementById("divisor").value = defaultDivisor;
}
function onPresetChange(e) {
const feConvolveMatrix = document.getElementById("feConvolveMatrix");
feConvolveMatrix.setAttribute("kernelMatrix", e.target.value);
const values = e.target.value.split(" ");
const matrix_values_inputs = document.getElementsByClassName("matrix_values");
for (let index = 0; index < matrix_values_inputs.length; ++index) {
matrix_values_inputs[index].value = values[index];
}
const defaultDivisor = values.reduce((pre, val) => pre + +val, 0);
feConvolveMatrix.setAttribute("divisor", defaultDivisor);
document.getElementById("divisor").value = defaultDivisor;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.