दिलचस्प पोस्ट
Express.js req.body अपरिभाषित jqGrid: कॉलम के नाम से पंक्ति सेल मूल्य पर आधारित पंक्ति का पृष्ठभूमि रंग बदलें जावा कन्स्ट्रक्टर इनहेरिटन्स बाइनरी के लिए पायथन int? 2 की एक सटीक के साथ दशमलव के लिए साधारण नियमित अभिव्यक्ति नाकआउट के बीच अंतर ऑब्जेक्ट literals बनाम फ़ंक्शन के रूप में घोषित मॉडल देखें वेबपेज पर कस्टम राइट-क्लिक मेनू कैसे जोड़ें? टंकिनर पाठ विजेट में टेक्स्ट को कैसे उजागर करें ऑब्जेक्ट प्रारंभकर्ता और कन्स्ट्रक्टर के बीच अंतर क्या है? SQL सर्वर, डेटा नुकसान के बिना एक तालिका बनाने के बाद स्वत: वृद्धि को कैसे सेट करें? PHP घातक त्रुटि: अपरिभाषित फ़ंक्शन को कॉल करें mssql_connect () कच्चे_इनपुट और टाइमआउट Gnuplot लाइन प्रकार आईपैड के लिए सफ़ारी में jQuery का उपयोग कर टच इवेंट को कैसे पहचाना? क्या यह संभव है? PHP लॉगिन सिस्टम: मुझे याद रखें (लगातार कुकी)

एचटीएमएल 5 कैनवास ड्रॉ इमेज रेसिस्ट बग आईओएस

मैं एचटीएमएल 5 कैनवास के साथ क्लाइंट साइड पर आईओएस कैमरा से ली गई छवि का आकार बदलना चाहता हूं, लेकिन मैं इस अजीब बग में चल रहा हूं जहां छवि का गलत अनुपात है, अगर ~ 1.5 एमबी से बड़ा

यह डेस्कटॉप पर काम करता है, लेकिन मीडिया अपलोड API के साथ नवीनतम आईओएस संस्करण में नहीं है।

आप यहाँ एक उदाहरण देख सकते हैं: http://jsbin.com/ekuros/1

किसी भी विचार कृपया इसे कैसे ठीक करें? क्या यह एक स्मृति मुद्दा है?

$('#file').on('change', function (e) { var file = e.currentTarget.files[0]; var reader = new FileReader(); reader.onload = function (e) { var image = $('<img/>'); image.on('load', function () { var square = 320; var canvas = document.createElement('canvas'); canvas.width = square; canvas.height = square; var context = canvas.getContext('2d'); context.clearRect(0, 0, square, square); var imageWidth; var imageHeight; var offsetX = 0; var offsetY = 0; if (this.width > this.height) { imageWidth = Math.round(square * this.width / this.height); imageHeight = square; offsetX = - Math.round((imageWidth - square) / 2); } else { imageHeight = Math.round(square * this.height / this.width); imageWidth = square; offsetY = - Math.round((imageHeight - square) / 2); } context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight); var data = canvas.toDataURL('image/jpeg'); var thumb = $('<img/>'); thumb.attr('src', data); $('body').append(thumb); }); image.attr('src', e.target.result); }; reader.readAsDataURL(file); }); 

वेब के समाधान से एकत्रित समाधान "एचटीएमएल 5 कैनवास ड्रॉ इमेज रेसिस्ट बग आईओएस"

एक जावास्क्रिप्ट केनवास का आकार परिवर्तन लाइब्रेरी है जो सब्सैमलिंग और ऊर्ध्वाधर स्क्वैश समस्याओं के आसपास काम करता है जो आईओएस उपकरणों पर कैनवास पर स्केल किए गए चित्रों को आकर्षित करते हैं: http://github.com/stomita/ios-imagefile-megapixel

अल्फा चैनल के साथ छवियों की स्केलिंग करते समय (जैसा कि यह मुद्दों के पता लगाने के लिए अल्फा चैनल का उपयोग करता है) और मौजूदा कैनवास तत्वों का आकार बदलने की कोशिश करते समय साइड इश्यू होते हैं, लेकिन यह पहला समाधान है जो मैंने पाया है कि वास्तव में इस मुद्दे पर हाथ में काम करता है।

स्टॉमीता एक स्टैक ओवरफ्लो उपयोगकर्ता भी है और उसका हल यहां पोस्ट किया गया है: https://stackoverflow.com/a/12615436/644048

यदि आपको अभी भी drawImage फ़ंक्शन के लंबे संस्करण का उपयोग करना है तो आप इसे बदल सकते हैं:

 context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); 

इसके लिए:

 drawImageIOSFix(context, img, sx, sy, sw, sh, dx, dy, dw, dh); 

आपको इन दो कार्यों को कहीं न कहीं शामिल करना होगा:

 /** * Detecting vertical squash in loaded image. * Fixes a bug which squash image vertically while drawing into canvas for some images. * This is a bug in iOS6 devices. This function from https://github.com/stomita/ios-imagefile-megapixel * */ function detectVerticalSquash(img) { var iw = img.naturalWidth, ih = img.naturalHeight; var canvas = document.createElement('canvas'); canvas.width = 1; canvas.height = ih; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); var data = ctx.getImageData(0, 0, 1, ih).data; // search image edge pixel position in case it is squashed vertically. var sy = 0; var ey = ih; var py = ih; while (py > sy) { var alpha = data[(py - 1) * 4 + 3]; if (alpha === 0) { ey = py; } else { sy = py; } py = (ey + sy) >> 1; } var ratio = (py / ih); return (ratio===0)?1:ratio; } /** * A replacement for context.drawImage * (args are for source and destination). */ function drawImageIOSFix(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) { var vertSquashRatio = detectVerticalSquash(img); // Works only if whole image is displayed: // ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio); // The following works correct also when only a part of the image is displayed: ctx.drawImage(img, sx * vertSquashRatio, sy * vertSquashRatio, sw * vertSquashRatio, sh * vertSquashRatio, dx, dy, dw, dh ); } 

यह ठीक काम करेगा कि यह आईओएस या अन्य प्लेटफार्मों पर चल रहा है या नहीं।

यह स्टॉमीता द्वारा महान काम पर आधारित है और आपको अपने काम में उसे श्रेय देना चाहिए।

ऐसा लगता है कि यह एक आईओएस 6 बग है पहलू को आपके कोड से अजीब से बाहर निकलने का कोई कारण नहीं है। मेरे पास यही समस्या है जो केवल आईओएस 6 में पेश की गई थी। ऐसा लगता है कि उनका उप-नमूना दिनचर्या गलत ऊंचाई देता है मैंने ऐप्पल को एक बग रिपोर्ट पेश की, और आपको ऐसा करना चाहिए अधिक बग रिपोर्ट वे इस के लिए बेहतर मिलता है

मैंने एक ही समस्या का अनुभव किया है ऐसा लगता है कि यह एक आईओएस की सीमा है, जेपीजी 2 मेगापिक्सेल से सब्सिमल है

IPhone पर सफारी के लिए संगत वेब सामग्री बनाना देखें

उपरोक्त कोड का एक संशोधित संस्करण

संपादित करें: http://jsfiddle.net/gWY2a/24/ पर L0LN1NJ4 का कोड देखा … लगता है कि थोड़ा बेहतर है …

 function drawImageIOSFix (ctx, img) { var vertSquashRatio = detectVerticalSquash (img) var arg_count = arguments.length switch (arg_count) { case 4 : ctx.drawImage (img, arguments[2], arguments[3] / vertSquashRatio); break case 6 : ctx.drawImage (img, arguments[2], arguments[3], arguments[4], arguments[5] / vertSquashRatio); break case 8 : ctx.drawImage (img, arguments[2], arguments[3], arguments[4], arguments[5], arguments[6], arguments[7] / vertSquashRatio); break case 10 : ctx.drawImage (img, arguments[2], arguments[3], arguments[4], arguments[5], arguments[6], arguments[7], arguments[8], arguments[9] / vertSquashRatio); break } // Detects vertical squash in loaded image. // Fixes a bug which squash image vertically while drawing into canvas for some images. // This is a bug in iOS6 (and IOS7) devices. This function from https://github.com/stomita/ios-imagefile-megapixel function detectVerticalSquash (img) { var iw = img.naturalWidth, ih = img.naturalHeight var canvas = document.createElement ("canvas") canvas.width = 1 canvas.height = ih var ctx = canvas.getContext('2d') ctx.drawImage (img, 0, 0) var data = ctx.getImageData(0, 0, 1, ih).data // search image edge pixel position in case it is squashed vertically. var sy = 0, ey = ih, py = ih while (py > sy) { var alpha = data[(py - 1) * 4 + 3] if (alpha === 0) {ey = py} else {sy = py} py = (ey + sy) >> 1 } var ratio = (py / ih) return (ratio === 0) ? 1 : ratio } }