ios 6或7大于2mb图片渲染到canvas压扁了

https://www.bountysource.com/issues/1335840-large-images-add-to-canvas-squashed-in-ios

	jaydenseric opened this issue on Nov 26, 2013 Large images are added to the canvas dramatically squashed on Safari iOS (6 or 7). This is persistent when manipulating the image with Fabric. See this image of a landscape scene: This is a known iOS Safari canvas issue with a programatic fix: See Stack Overflow post. There is a $50 open bounty on this issue. Add to the bounty at Bountysource. View original issue »
Comments 6
	ArendPijls on Jan 20, 2014 Can this be fixed for fabric js?
	Johannes Gottschalk on Jan 31, 2014 this issue is related to the limitations of mobile safari and can't really be fixed in fabric. What you need are smaller images or a dirty workaround. You can prevent this behavior on all devices by using images smaller than 3 megapixel. Devices with more than 256mb ram you can use images with 5MP FYI:https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
	Juriy Zaytsev on Feb 2, 2014 @jaydenseric can you attach an image that's squished (for testing)
	jaydenseric on Feb 2, 2014 I don't have access to the original project anymore. I think I was able to find the same image I used in the screenshot. It is a wallpaper from the internet, so I don't know the licensing implications of putting it here but here goes...
	alisspers on Apr 30, 2014 Has anyone successfully managed to use any of the linked fixes with fabric?
	lavrton on Apr 30, 2014 Hi guys. I am KineticJS contributor (but also like Fabric a lot). You may use thishttp://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios workaround to solve the issue. But inserting this workaround inside library might be bad idea because of possible side effects. So while discovering the problem I found that the best way might be replacing image element with fixed canvas element. Here is the code: // Workaround for vertically squashed images in iOS6 & iOS7 // general idea is using canvas element instead of image // detect scale ratio for image function detectVerticalSquash(img) { var ih = img.height; 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; } // create canvas with correct representation to replace with image function generateCanvas(image){ var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.height; var vertSquashRatio = detectVerticalSquash(image); context.drawImage(image, 0, 0, image.width, image.height / vertSquashRatio); return(canvas); } var img = new Image(); img.onload = function() { var canvas = new fabric.Canvas('con'); var imgInstance = new fabric.Image(generateCanvas(img), { left: 10, top: 10, angle: 30, opacity: 0.85 }); canvas.add(imgInstance); canvas.renderAll(); }; img.src = sourseOfHUGEimage;