Comment sauvegarder un canevas avec des filtres appliqués, en utilisant ces réponses stackoverflow?

Question

Je suis conscient que la question de savoir comment appliquer réellement des filtres CSS à une image a été posée plusieurs fois. Certaines réponses sont données qui n'utilisent pas réellement les filtres CSS, mais semblent toujours faire le travail. Malheureusement, je suis très novice avec JavaScript, et je ne comprends pas ces réponses.

Alors, ma question est en deux parties:

1. Certaines de ces réponses sont vieux, a une façon été mise au point d'enregistrer une image en toile avec des filtres CSS appliqué? Si non, comment implémenter les solutions décrites dans l'une de ces réponses stackoverflow? J'ai essentiellement besoin d'un échantillon de code pour appliquer réellement plusieurs filtres à l'image ou aux pixels, ce qui n'était pas contenu dans les réponses originales.

Merci

Réponses:

Dans la première réponse, je suis perdu sur le "..." dans la boucle. Dans la deuxième réponse, il n'y a pas de détails sur l'étape 4. Et si je ne me trompe pas, ces deux filtres, l'utilisation de CSS3 qui est mon choix préféré: Capture/save/export an image with CSS filter effects applied

Je suis perdu à l'étape 3 de celle-ci : is anyone solve about saving filtered canvas as an image?

Encore une fois, je suis perdu sur l'application des filtres non-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;" />&nbsp; &nbsp; 
    Contrast: <input type="range" name="contrast" min="0" max="200" step="5" onmousemove="apply()" ontouchmove="apply()" style="vertical-align:-7px;"/>&nbsp; &nbsp; 
    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> 

Answer 1

Regardons cela cette partie de votre question, parce que si vous ne les navigateurs supportant où cela fonctionne, il est tout vous avez besoin:

Encore une fois, je suis perdu sur l'application des filtres non-CSS: How to save image from canvas with css filters

filter property le contexte de fonctionne exactement comme les filtres CSS – il faut t les mêmes fonctions – mais l'important est de savoir que, contrairement à CSS, l'application d'un filtre au contexte ne change pas l'image du canevas en cours. Il s'applique uniquement aux opérations de dessin suivantes.

Voici un exemple. Lorsque vous exécutez l'extrait de code ci-dessous, vous verrez deux toiles. Le premier a un CSS filter appliqué, le second n'a pas (comme en témoigne le fait que la bordure de la première toile est floue et rose, tandis que la seconde est croquante et verte).

Lorsque vous cliquez ensuite sur le bouton « Copier image », le code

1. Attend à ce que les filtres CSS appliquent actuellement à la première toile,
2. applique cette valeur de filtre au deuxième contexte,
3. dessine la première toile sur la seconde.

En raison de 2), l'opération de dessin de 3) aura le filtre appliqué. La deuxième toile ressemble maintenant à la première, mais la deuxième toile contient maintenant vraiment les pixels teints et flous, alors que la première a toujours des pixels rouges et clairs. Filtre CSS.

À ce stade, vous pouvez enregistrer le deuxième comme une image, et il aura l'aspect attendu.

window.onload = function() { 
 
    var cnv1 = document.getElementById("canvas1"); 
 
    var ctx1 = cnv1.getContext("2d"); 
 
    
 
    var cnv2 = document.getElementById("canvas2"); 
 
    var ctx2 = cnv2.getContext("2d"); 
 
    
 
    ctx1.font = "30px sans-serif"; 
 
    ctx1.fillStyle = "red"; 
 
    ctx1.fillText("Hello world!", 30, 80); 
 

 
    var button = document.getElementById("button"); 
 
    button.onclick = function() { 
 
    
 
    // take whatever CSS filter is applied to the first canvas 
 
    var cssFilter = getComputedStyle(cnv1).filter; 
 
    
 
    // use that filter as the second canvas' context's filter 
 
    // all subsequent drawing operations will have this filter applied 
 
    ctx2.filter = cssFilter; 
 
    
 
    // take whatever is in canvas 1 and draw it onto canvas 2 
 
    // the text on cnv1 is red and un-blurred (it's only the css 
 
    // that makes it look otherwise), but the above filter will 
 
    // cause blurring and hue-shifting to be applied to the drawImage 
 
    // operation 
 
    ctx2.drawImage(cnv1, 0, 0); 
 
    }; 
 
}

* { 
 
    vertical-align: top; 
 
} 
 

 
canvas { 
 
    border: 2px solid green; 
 
} 
 
#canvas1 { 
 
    filter: blur(2px) hue-rotate(180deg); 
 
}

<canvas id="canvas1" width="200" height="200"></canvas> 
 

 
<canvas id="canvas2" width="200" height="200"></canvas> 
 

 
<button id="button">Copy image</button>