【发布时间】：2017-10-10 03:02:57
【问题描述】：
我知道如何将 CSS 过滤器实际应用于图像的问题已被多次询问。给出的一些答案实际上并不使用 CSS 过滤器，但似乎仍然可以完成工作。不幸的是，我对 JavaScript 很陌生，我不明白这些答案。
所以，我的问题分为两部分：
由于其中一些答案已经过时，是否已开发出一种方法来保存应用了 CSS 过滤器的画布图像？
如果没有，我该如何实施这些 stackoverflow 答案之一中描述的解决方案？我本质上需要一个代码示例，将多个过滤器实际应用于图像或像素，这不包含在原始答案中。
谢谢
答案：
在第一个答案中，我迷失了循环中的“...”。在第二个答案中，没有关于第 4 步的详细信息。如果我是正确的，这两个都使用 CSS3 过滤器，这是我的首选：Capture/save/export an image with CSS filter effects applied
我在这一步的第 3 步迷路了：is anyone solve about saving filtered canvas as an image?
再次，我对非 CSS 过滤器的应用感到迷茫：How to save image from canvas with css filters
JavaScript：
// I know I eventually need to move these globals so they're passed as parameters.
var image;
var c;
var context;
var file;
// Begin File Open Code.
function fileOpen()
{
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('iDisplay');
fileInput.addEventListener('change', function(e)
{
file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e)
{
iDisplay.innerHTML = "";
image = new Image();
image.src = reader.result;
image.id = "I"; // Add an id attribute so the image editor code can access the image. // Image has since been moved to canvas.
iDisplay.appendChild(image);
image.onload = function()
{
c = document.getElementById("C");
context = c.getContext("2d");
c.width = image.width;
c.height = image.height;
context.drawImage(image,0,0);
}
}
reader.readAsDataURL(file);
}
else
{
iDisplay.innerHTML = "File type not supported."
}
});
setValues(); // Call setValues() as function exits to set Image Editing Code Hue Slider to 0.
}
// End File Open Code
// Begin Image Editing Code.
var degrees = 0;
var percentB = 100;
var percentC = 100;
// Set initial values of sliders
function setValues()
{
form1.brightness.value = 100;
form1.contrast.value = 100;
form1.hue.value = 0;
}
// Get slider settings and apply changes to image
function apply()
{
degrees = form1.hue.value;
percentC = form1.contrast.value;
percentB = form1.brightness.value;
// This is the crux of my question: How do I apply this properly, using the stackoverflow answers, so that the edited image may be saved?
if (document.getElementById("C") != null) document.getElementById("C").style.filter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)";
if (document.getElementById("C") != null) document.getElementById("C").style.WebkitFilter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)";
}
// End Image Editing Code
// Canvas was not cooperating, it needed c.width not c.style.width, can probably remove these and replace with small default values.
function setCanvasWidth()
{
c.width = image.width;
}
function setCanvasHeight()
{
c.height = image.height;
}
// Begin File Save Code (or user can right click and save if filters get applied.
function save()
{
alert("Place file save code here.")
}
HTML
<!doctype html>
<html lang="en">
<head>
<title>HTML5 CSS3 Javascript Image Editor</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="default.css"/>
<script src="nav.js"></script>
<script type="text/javascript">
// JavaScript is in here.
</script>
<!-- style elements specific to this page are placed in the style tags. -->
<style>
image
{
max-width: 100%;
display: block;
margin: auto;
margin-left: auto;
margin-right: auto;
}
#C
{
max-width: 100%;
display: block;
margin: auto;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#iDisplay
{
margin-top: 2em;
max-width: 100%;
overflow-x: auto;
margin-left: auto;
margin-right: auto;
display: none;
}
</style>
</head>
<body onload="setValues()">
<header>
<a href="index.html"><img src="logoglow.png" alt="Logo Image" width="215" height="135" /></a>
<a href="index.html"><img src="ac.png" alt="Header Image" width="800" height="135" /></a>
</header>
<main>
<h3>An Ongoing Experiment in HTML5 / CSS3 / JavaScript Image Editing</h3>
<div>
<!-- Nav is floating left and Main is floating right, clear float styles (IF NEEDED) so they dont interfere with new image. -->
<p style="float:left;">
<input type="file" id="fileInput" onclick="fileOpen()"></p>
<br style="clear:both">
</div>
<div id="iDisplay"></div>
<br style="clear:both"><br style="clear:both">
<!-- <script>document.write('<img src="' + file + '"/>');</script><br><br> -->
<!-- <div style="overflow:scroll;"> -->
<canvas style="color:#FFFFFF;" id="C" width="javascript:setCanvasWidth()" height="javascript:setCanvasHeight()">Your browser is too old to support this feature. <br>Please consider updating to a modern browser.</canvas>
<!-- </div> -->
<!-- use javascript:function() to get width and height? -->
<div id="afterCanvas">
<br><br>
<form name="form1" id="form1id" action="javascript:save();" style="font-size:90%; text-align:center;">
Brightness: <input type="range" name="brightness" min="0" max="200" step="5" onmousemove="apply()" ontouchmove="apply()" style="vertical-align:-7px;" />
Contrast: <input type="range" name="contrast" min="0" max="200" step="5" onmousemove="apply()" ontouchmove="apply()" style="vertical-align:-7px;"/>
Hue: <input type="range" name="hue" min="0" max="360" step="5" onmousemove="apply()" ontouchmove="apply()" style="vertical-align:-7px;"/>
<br><br>
<input type="submit" style="float:left;" value="Save Changes" /> <!-- chnage to type="submit" if form action is needed -->
</form>
</div>
</main>
</body>
</html>
【问题讨论】：
-
我可能应该提到，5 天后，我一切正常。除了我的问题。
标签： javascript html css canvas css-filters