javascript - CanvasRenderingContext2D फिल्टर के साथ कैनवास सहेजा जा रहा है



html5 html5-canvas (1)

[संपादित करें]: यह बग FF52 + (वर्तमान नवीनतम रात में तय किया गया है )
अगर मैं किसी समय में किसी को मदद करता है तो इसका उत्तर और उसके समाधान का उत्तर दें।

यह फ़ायरफ़ॉक्स में फिल्टर-फ़ंक्शंस में एक बग है। क्रोम 54 बस इसे ठीक से संभालना लगता है

जब एक फिल्टर-फ़ंक्शन ctx.filter के मान के रूप में पारित हो जाता है, तो एफएफ कैनवास का दाग करता है, जिससे सभी निर्यात विधियां अनुपलब्ध हो जाती हैं ( toDataURL शामिल है)।

हालांकि, यह एसवीजी फ़िल्टर के साथ बहुत खुश है, इसलिए एक वैकल्पिक हल, जब तक यह बग ठीक नहीं हो जाता है, url(#yourSVGFilter) मान प्रकार के साथ एक एसवीजी फिल्टर का उपयोग करना है।

var img = new Image();
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
document.body.appendChild(c);

btn.onclick = function() {
  var i = new Image();
  i.src = c.toDataURL();
  document.body.appendChild(i);
};

img.onload = function() {
  c.width = this.naturalWidth;
  c.height = this.naturalHeight;
  // this doesn't taint the canvas
  ctx.filter = 'url(#blurMe)';

  ctx.drawImage(img, 0, 0);
}

img.crossOrigin = 'anonymous';
img.src = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png';
<svg width="0" height="0">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
  </filter>
</svg>

<button id="btn">call toDataURL()</button><br>

(और एक बेला कि उत्सुक के लिए समस्या reproduces)

मुझे कैनवास रेंडरिंगकॉन्टेक्स 2 डी। फ़िलटर के साथ फोटो सहेजने में समस्या है। जब मैं वीडियो से कनेक्ट करता हूं और किसी भी फ़िल्टर के बिना शॉट लेने का प्रयास करता हूं, तो यह सामान्य रूप से बचाता है हालांकि, कैनवास में कुछ फिल्टर जोड़ने के बाद, यह एचटीएम फ़ाइल के रूप में सहेज रहा है या यदि यह किया गया था, तो फिल्टर के बिना पिछली तस्वीर वापस कर दिया गया है। यह अजीब है, कि स्क्रीनशॉट मैन्युअल रूप से उस पर क्लिक करके डाउनलोड करने के दौरान, इसके पास डेटाउल के पास है, सामान्य रूप से डाउनलोड करता है, लेकिन फिल्टर होता है, लेकिन इसे डेटाउर के द्वारा सहेजते समय, यह अभी भी उस चित्र को नहीं देखता है इन फिल्टर के साथ फोटो सहेजने के लिए मुझे क्या करना चाहिए?

यहाँ मेरा कोड का टुकड़ा है:

var canvas = document.getElementById('canvas');       
var context = canvas.getContext('2d');  
var video = document.getElementById("video");

document.getElementById("snapshot").addEventListener("click", function() {
            if ($('video').hasClass('blur')) {
                context.filter ="blur(2px)";
            }
            else {
            context.filter= "";
            }
              context.drawImage(video, 0, 0);
      });
      
document.getElementById("download").addEventListener("click", function() {
              download.href = canvas.toDataURL("image/jpeg");
              };
.blur {
  -webkit-filter: blur(3px);
     -moz-filter: blur(3px);
      -ms-filter: blur(3px);
       -o-filter: blur(3px);
          filter: blur(3px);
}
<video id="video" autoplay></video>
<canvas id="canvas"></canvas>
<button id="download" download="picture" href=""></button>





todataurl