दिलचस्प पोस्ट
क्या "इस के लिए rvalue संदर्भ" है? कॉल विरामण त्रुटि को अस्वीकार करने के साथ वादा निर्माता Matplotlib स्कैटर चार्ट (कोड, एल्गोरिथ्म, टिप्स) के लिए लेबल प्लेसमेंट में सुधार कैसे करें? सीएसएस तालिका-सेल समान चौड़ाई jQuery बाइंड क्लिक * कुछ भी * लेकिन * तत्व * एक ही नाम के साथ कई फ़ंक्शन आर में मिश्रित संख्याओं और अक्षरों के तारों का संख्यात्मक हिस्सा निकालें समारोह mysql_real_escape_string के पीडीओ समकक्ष क्या है? XSLT: <xsl: copy> के दौरान कोई विशेषता मान कैसे बदल सकता है? कौन एक "नया" ऑपरेशन के दौरान आवंटित स्मृति को हटाता है जो निर्माता में अपवाद है? जावास्क्रिप्ट में वस्तु की संपत्ति प्राप्त करें पायथन: वर्ग और आवृत्ति विशेषताओं के बीच का अंतर 3 जी बनाम एज को निर्धारित करना मैं एक्सेप्शन लॉन्च प्रोफाइल को कार्यस्थानों में कैसे बचा सकता हूं? अजगर सबप्रोसेक चेक_आउटपुट ने शून्य-शून्य निकास स्थिति 1 लौटाई

एचटीएमएल 5 कैनवास ड्रा इमेज: एंटीलिअसिंग कैसे लागू करें

कृपया निम्नलिखित उदाहरण पर एक नज़र डालें:

http://jsfiddle.net/MLGr4/47/

var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); img=new Image(); img.onload=function(){ canvas.width=400; canvas.height=150; ctx.drawImage(img,0,0,img.width,img.height,0,0,400,150); } img.src="http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg"; 

जैसा कि आप देख रहे हैं, यह छवि एंटी-एलिआईज़ नहीं है, हालांकि यह कहा जाता है कि ड्राइमेज स्वचालित रूप से एलियासिंग पर लागू होता है मैंने कई अलग-अलग तरीकों की कोशिश की लेकिन यह काम करने के लिए प्रतीत नहीं होता क्या आप कृपया मुझे बता सकते हैं कि मैं एंटी-अलाइज छवि कैसे प्राप्त कर सकता हूं? धन्यवाद।

Solutions Collecting From Web of "एचटीएमएल 5 कैनवास ड्रा इमेज: एंटीलिअसिंग कैसे लागू करें"

कारण

कुछ छवियां नीचे-नमूना करने के लिए बहुत मुश्किल हैं और इस तरह से एक के रूप में जब आप एक बड़े आकार से एक छोटा करने के लिए जाना चाहता हूँ curves के साथ इस interpolate

ब्राउज़र्स आमतौर पर प्रदर्शन (कारण) प्रदर्शन कारणों के लिए द्वि-घन (4×4 नमूना) के बजाय कैनवास तत्व के साथ द्वि-रेखीय (2×2 नमूना) प्रक्षेप का उपयोग करते हैं।

अगर कदम बहुत बड़ा है तो नमूना के लिए पर्याप्त पिक्सेल नहीं हैं, जिसके परिणामस्वरूप परिलक्षित होता है।

सिग्नल / डीएसपी परिप्रेक्ष्य से आप इसे कम-पास वाले फ़िल्टर के थ्रेसहोल्ड वैल्यू के रूप में देख सकते हैं, जो संकेत में बहुत अधिक आवृत्तियों (विवरण) हैं, जो एलियासिंग हो सकते हैं।

उपाय

2017 का अद्यतन करें: अब एक नई संपत्ति है जो स्टेक्स में परिभाषित की जाती है, जो कि पुन: नमूनाकरण की गुणवत्ता निर्धारित करती है:

 context.imageSmoothingQuality = "low|medium|high" 

यह वर्तमान में केवल क्रोम में समर्थित है प्रति स्तर के लिए इस्तेमाल किए गए वास्तविक विधियां निर्णय लेने के लिए विक्रेता को छोड़ दी जाती हैं, लेकिन "उच्च" या गुणवत्ता के बराबर कुछ के लिए लंन्ज़ोस ग्रहण करना उचित है। इसका मतलब है कि कदम-डाउन पूरी तरह से छोड़ा जा सकता है, या छवि आकार और ब्राउज़र के आधार पर बड़े चरणों का इस्तेमाल कम रेड्रॉड्स के साथ किया जा सकता है। तब तक..:
संचरण का अंत

उचित परिणाम प्राप्त करने के लिए चरण-डाउन का उपयोग करने का समाधान है स्टेप डाउन का मतलब है कि आप नमूने के लिए पर्याप्त पिक्सल को कवर करने के लिए सीमित प्रक्षेप सीमा को अनुमति देने के लिए चरणों में आकार को कम कर सकते हैं।

इससे द्वि-रेखीय प्रक्षेप के साथ अच्छे परिणाम भी मिल सकते हैं (यह वास्तव में ऐसा करते समय बहुत अधिक द्वि-घन जैसा व्यवहार करता है) और ओवरहेड कम है क्योंकि प्रत्येक चरण में नमूने के लिए कम पिक्सेल होते हैं

आदर्श कदम प्रत्येक चरण में आधे संकल्प पर जाना है जब तक कि आप लक्ष्य आकार सेट नहीं करते (यह उल्लेख करने के लिए जो मेबेल के लिए धन्यवाद!)।

संशोधित बेला

मूल प्रश्न के रूप में प्रत्यक्ष स्केलिंग का उपयोग करना:

सामान्य डाउन-स्कैलाइड इमेज

नीचे दिखाए गए अनुसार चरण-नीचे का उपयोग करना:

डाउन-स्टेपड इमेज

इस मामले में आपको 3 चरणों में कदम उठाने की आवश्यकता होगी:

चरण 1 में हम ऑफ-स्क्रीन कैनवास का उपयोग करके छवि को आधे से कम कर देते हैं:

 /// step 1 - create off-screen canvas var oc = document.createElement('canvas'), octx = oc.getContext('2d'); oc.width = img.width * 0.5; oc.height = img.height * 0.5; octx.drawImage(img, 0, 0, oc.width, oc.height); 

चरण 2 ऑफ-स्क्रीन कैनवास का पुन: उपयोग करता है और छवि को फिर से आधे से कम कर देता है:

 /// step 2 octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5); 

और हम मुख्य कैनवास में एक बार फिर आकर्षित करते हैं, फिर से आधे से कम होकर अंतिम आकार के लिए:

 /// step 3 ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 0, 0, canvas.width, canvas.height); 

सुझाव:

आप इस फार्मूले का उपयोग करते हुए आवश्यक चरणों की कुल संख्या की गणना कर सकते हैं (इसमें लक्ष्य आकार निर्धारित करने के लिए अंतिम चरण शामिल है):

 steps = Math.ceil(Math.log(sourceWidth / targetWidth) / Math.log(2)) 

मैं इस तरह के कार्यों के लिए अत्यधिक सुझाव देता हूं इसकी गुणवत्ता कई आकार घटाने से बेहतर है और एक ही समय में काफी तेज है। यहां एक डेमो है

  var getBase64Image = function(img, quality) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); //----- origin draw --- ctx.drawImage(img, 0, 0, img.width, img.height); //------ reduced draw --- var canvas2 = document.createElement("canvas"); canvas2.width = img.width * quality; canvas2.height = img.height * quality; var ctx2 = canvas2.getContext("2d"); ctx2.drawImage(canvas, 0, 0, img.width * quality, img.height * quality); // -- back from reduced draw --- ctx.drawImage(canvas2, 0, 0, img.width, img.height); var dataURL = canvas.toDataURL("image/png"); return dataURL; // return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); } 

केन के जवाब के अतिरिक्त, यहां एक अन्य उपाय है जो छोरों में डाउनसैम्पलिंग का प्रदर्शन करता है (इसलिए परिणाम ब्राउज़र के एल्गोरिदम का उपयोग करके अच्छा लगता है):

  function resize_image( src, dst, type, quality ) { var tmp = new Image(), canvas, context, cW, cH; type = type || 'image/jpeg'; quality = quality || 0.92; cW = src.naturalWidth; cH = src.naturalHeight; tmp.src = src.src; tmp.onload = function() { canvas = document.createElement( 'canvas' ); cW /= 2; cH /= 2; if ( cW < src.width ) cW = src.width; if ( cH < src.height ) cH = src.height; canvas.width = cW; canvas.height = cH; context = canvas.getContext( '2d' ); context.drawImage( tmp, 0, 0, cW, cH ); dst.src = canvas.toDataURL( type, quality ); if ( cW <= src.width || cH <= src.height ) return; tmp.src = dst.src; } } // The images sent as parameters can be in the DOM or be image objects resize_image( $( '#original' )[0], $( '#smaller' )[0] ); 

इस पोस्ट के क्रेडिट

मैंने दिलचस्पी रखने वाले किसी भी व्यक्ति के लिए छवियों के उच्च गुणवत्ता के आकार को संभालने के लिए पुन: प्रयोज्य कोणीय सेवा बनाई है: https://gist.github.com/fisch0920/37bac5e741eaec60e983

इस सेवा में केन के चरण-वार डाउनसैक्लिंग दृष्टिकोण के साथ-साथ यहां पाया गया लंन्ज़ोस कन्फोल्यूशन दृष्टिकोण का एक संशोधित संस्करण शामिल है ।

मैंने दोनों ही समाधान शामिल किए क्योंकि वे दोनों अपने स्वयं के पेशेवर / विपक्ष हैं लंन्ज़ोस कनलोल्यूशन दृष्टिकोण धीमा होने की कीमत पर उच्च गुणवत्ता है, जबकि चरण-वार डाउनस्कलिंग दृष्टिकोण काफी हद तक एंटीअलियाज़ परिणाम पैदा करता है और काफी तेज है।

उदाहरण उपयोग:

 angular.module('demo').controller('ExampleCtrl', function (imageService) { // EXAMPLE USAGE // NOTE: it's bad practice to access the DOM inside a controller, // but this is just to show the example usage. // resize by lanczos-sinc filter imageService.resize($('#myimg')[0], 256, 256) .then(function (resizedImage) { // do something with resized image }) // resize by stepping down image size in increments of 2x imageService.resizeStep($('#myimg')[0], 256, 256) .then(function (resizedImage) { // do something with resized image }) })