javascript - Why in Canvas(JS) toDataUrl() doesn't work after drawImage()? -


  & lt; स्क्रिप्ट & gt; var कैनवास = document.getElementById ('myCanvas'); Var संदर्भ = canvas.getContext ('2d'); Var img = नया चित्र (); Img.onload = function () {canvas.width = img.width; canvas.height = img.height; context.drawImage (img, 0,0); } Img.src = "2.jpg"; समारोह सेक () {var dataURL = canvas.toDataURL ("छवि / jpg", 0.5); document.getElementById ( "img") src = dataURL। } SetTimeout (सेक, 1000); & Lt; / स्क्रिप्ट & gt;   

मैंने उदाहरण के लिए fillRect () के बजाय drawImage () के रूप में उपयोग करने का प्रयास किया है। तो यह सामान्य रूप से काम करता है ... मुझे यकीन है कि कारण drawImage ()

यदि आपकी छवि यूआरएल (मूल यूआरएल, डेटा यूआरएल नहीं है) उस पेज की तुलना में एक अलग डोमेन से है जहां कोड चलता है, तो कैनवास दागदार हो जाएगा जब आप चित्र खींचते हैं इसे करने के लिए, और आप पिक्सेल वापस बाहर पाने के लिए सक्षम नहीं होगा। यह एक सुरक्षा उपाय है इस प्रकार यदि आप jsfiddle पर परीक्षण कर रहे हैं और आप http://placekitten.com/100/100 परीक्षण करने के लिए यूआरएल का प्रयोग कर रहे हैं, तो यह काम नहीं करेगा।

ध्यान दें कि अधिकांश आधुनिक ब्राउज़रों ने एक डोमेन साझा करने के लिए दो फ़ाइल: // यूआरएल पर विचार नहीं किया है, इसलिए यदि आप स्थानीय फाइलों से परीक्षा चला रहे हैं, तो यह काम नहीं करेगा।

Comments

Popular posts from this blog

c# - Roxy file manager in MVC doesn't accept session path -

jsp - No mapping found for HTTP request with URI with annotation config Spring MVC and Jetty -

java - Ajax call to jsp and jsp redirecting to further jsp -