I'm trying to resize an image on the client side using "file[type=input]" and an html5 canvas. The code works fine in desktop chrome and android chrome -- and also in iOS when tested with a 2048px JPG.
But when I test with a photo from an iPhone 4S, {"origW":3264,"origH":2448}, I get a bad result in iOS safari/chrome (see screenshot) . It must be a memory problem, but is there a workaround?
Use the jsfiddle to try it yourself http://jsfiddle.net/CBuJF/32/
function downsizeImgDataURL (origImg, targetImg){
consolelog("resizing dataURL to 320px");
var ctx, filesize, img, canvas, resizeH, resizeW, resizedDataURL, targetWidth;
targetWidth = 320;
if (origImg.width > targetWidth) {
resizeH = origImg.height / origImg.width * targetWidth;
resizeW = targetWidth;
}
filesize = [origImg.src.length];
consolelog("*** downsize canvas, IMG.onload(): downsized=" + JSON.stringify([resizeW, resizeH]));
canvas = document.createElement('canvas')
canvas.width = resizeW
canvas.height = resizeH
ctx = canvas.getContext("2d");
ctx.drawImage(origImg, 0, 0, resizeW, resizeH);
resizedDataURL = canvas.toDataURL("image/jpeg");
filesize.push(resizedDataURL.length);
consolelog("*** downsize result, filesize=" + JSON.stringify(filesize));
targetImg.src = resizedDataURL;
}
Related
I am trying to use PDF.js to view PDF documents. I find the display really low resolutions to the point of being blurry. Is there a fix?
// URL of PDF document
var url = "https://www.myFilePath/1Mpublic.pdf";
// Asynchronous download PDF
PDFJS.getDocument(url)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
// Set scale (zoom) level
var scale = 1.2;
// Get viewport (dimensions)
var viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
canvas.height = viewport.height;
canvas.width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
});
There are two things you can do. I tested and somehow it worked, but you will get a bigger memory consumption.
1 . Go to pdf.js and change the parameter MAX_GROUP_SIZE to like 8192 (double it for example) . Be sure to have your browser cache disable while testing.
You can force the getViewport to retrieve the image in better quality but like, I don't know how to say in English, compress it so a smaller size while showing:
// URL of PDF document
var url = "https://www.myFilePath/1Mpublic.pdf";
// Asynchronous download PDF
PDFJS.getDocument(url)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
// Set scale (zoom) level
var scale = 1.2;
// Get viewport (dimensions)
var viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
var resolution = 2 ; // for example
canvas.height = resolution*viewport.height; //actual size
canvas.width = resolution*viewport.width;
canvas.style.height = viewport.height; //showing size will be smaller size
canvas.style .width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport,
transform: [resolution, 0, 0, resolution, 0, 0] // force it bigger size
};
// Render PDF page
page.render(renderContext);
});
enter code here
Hope it helps!
This code will help you, my issue was pdf was not rendering in crisp quality according with the responsiveness. So i searched , and modified my code like this. Now it works for rendering crisp and clear pdf according to the div size you want to give. `var loadingTask = pdfjsLib.getDocument("your_pdfurl");
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var container = document.getElementById("container") //Container of the body
var wrapper = document.getElementById("wrapper");//render your pdf inside a div called wrapper
var canvas = document.getElementById('pdf');
var context = canvas.getContext('2d');
const pageWidthScale = container.clientWidth / page.view[2];
const pageHeightScale = container.clientHeight / page.view[3];
var scales = { 1: 3.2, 2: 4 },
defaultScale = 4,
scale = scales[window.devicePixelRatio] || defaultScale;
var viewport = page.getViewport({ scale: scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
var displayWidth = Math.min(pageWidthScale, pageHeightScale);;
canvas.style.width = `${(viewport.width * displayWidth) / scale}px`;
canvas.style.height = `${(viewport.height * displayWidth) / scale}px`;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
console.log('Page rendered');
});
});
}, function(reason) {
// PDF loading error
console.error(reason);
});`
I am trying to export openlayers 3 map to PNG.
This example is working well http://openlayers.org/en/master/examples/export-map.html , but the export image width and height are double than the original map canvas.
If the map canvas is 1330x440, I get the exported png image as 2660x880 pixels.
Any idea how to get the export size same as canvas size ?
This is because your device pixel ratio is 2, because you have a HiDPI (Retina) display.
You can either configure your map with {pixelRatio: 1} and get a blurry map, or scale the exported image when ol.has.DEVICE_PIXEL_RATIO is not equal 1:
map.once('postcompose', function(event) {
var dataURL;
var canvas = event.context.canvas;
if (ol.has.DEVICE_PIXEL_RATIO == 1) {
dataURL = canvas.toDataURL('image/png');
} else {
var targetCanvas = document.createElement('canvas');
var size = map.getSize();
targetCanvas.width = size[0];
targetCanvas.height = size[1];
targetCanvas.getContext('2d').drawImage(canvas,
0, 0, canvas.width, canvas.height,
0, 0, targetCanvas.width, targetCanvas.height);
dataURL = targetCanvas.toDataURL('image/png');
}
});
map.renderSync();
I've been searching for this issue with no results, so I ask this question.
I created a game in HTML5, 650x510 pixels resolution. The game scales to fit in all devices resolution, this is my scaling function:
function onResize() {
var w = window.innerWidth;
var h = window.innerHeight;
var ow = 650;
var oh = 510;
// keep aspect ratio
scale = Math.min(w / ow, h / oh);
stage.scaleX = scale;
stage.scaleY = scale;
// adjust canvas size
stage.canvas.width = ow * scale;
stage.canvas.height = oh * scale;
stage.update();
}
On all devices the game scales perfectly but on iPhone5(iOS 7.1), iPhone6(iOS 8.1) and iPhone6 Plus(iOS 8.4) when I rotate to landscape the canvas looks really blurry.
The thing is that with iOS 9.0, the canvas looks perfect on iPhone6 and iPhone6 Plus.
I've done this tests with the Xcode simulator.
Does anyone have any clues about why this blur can be happening and how to solve it?
Thanks a lot,
Mikeldi
I'm developing in Xamarin and would like to draw a simple circle with the text "CIRCLE" inside it and display that image in a UIImageView. The problem is that the circle and text appear very blurry. I've read a bit about subpixels but I don't think that's my problem.
Here's the blurry image and code, hoping someone has some ideas :)
UIGraphics.BeginImageContext (new SizeF(150,150));
var context = UIGraphics.GetCurrentContext ();
var content = "CIRCLE";
var font = UIFont.SystemFontOfSize (16);
const float width = 150;
const float height = 150;
context.SetFillColorWithColor (UIColor.Red.CGColor);
context.FillEllipseInRect (new RectangleF (0, 0, width, height));
var contentString = new NSString (content);
var contentSize = contentString.StringSize (font);
var rect = new RectangleF (0, ((height - contentSize.Height) / 2) + 0, width, contentSize.Height);
context.SetFillColorWithColor (UIColor.White.CGColor);
new NSString (content).DrawString (rect, font, UILineBreakMode.WordWrap, UITextAlignment.Center);
var image = UIGraphics.GetImageFromCurrentImageContext ();
imageView.Image = image;
The reason why it's blurry is because it was resized. That bitmap is not 150x150 (like the context you created), it's 333x317 pixels.
It could be because imageView is scaling it's image (there's no source code) or because of pixel doubling (for retina displays). In the later case what you really want to use is:
UIGraphics.BeginImageContextWithOptions (size, false, 0);
which will (using 0) automagically use the right scaling factor for retina (or not) display - and look crisp (and not oversized) on all types of devices.
I have implemented Uploadify in my ASP.NET MVC 3 application to upload images, but I now want to resize the images that I upload. I am not sure on what next to do in order to start resizing. I think there might be various ways to perform this resize, but I have not been able to find any example of this as yet. Can anyone suggest some way of doing this? Thanx
Here's a function you can use on the server side. I use it to process my images after uploadify is done.
private static Image ResizeImage(Image imgToResize, Size size)
{
int sourceWidth = imgToResize.Width;
int sourceHeight = imgToResize.Height;
float nPercent = 0;
float nPercentW = 0;
float nPercentH = 0;
nPercentW = ((float)size.Width / (float)sourceWidth);
nPercentH = ((float)size.Height / (float)sourceHeight);
if (nPercentH < nPercentW)
nPercent = nPercentH;
else
nPercent = nPercentW;
int destWidth = (int)(sourceWidth * nPercent);
int destHeight = (int)(sourceHeight * nPercent);
Bitmap b = new Bitmap(destWidth, destHeight);
Graphics g = Graphics.FromImage((Image)b);
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(imgToResize, 0, 0, destWidth, destHeight);
g.Dispose();
return (Image)b;
}
Here's how I use it:
int length = (int)stream.Length;
byte[] tempImage = new byte[length];
stream.Read(tempImage, 0, length);
var image = new Bitmap(stream);
var resizedImage = ResizeImage(image, new Size(300, 300));
Holler if you need help getting it running.
You have 3 ways:
Use GDI+ library (example of code - C# GDI+ Image Resize Function)
3-rd part components (i use ImageMagick - my solution: Generating image thumbnails in ASP.NET?)
Resize images on user side (some uploaders can do this)