We have implemented FineUploader and are running into an issue with some images that our clients are uploading. For large image files with a repeated canvas texture, FineUploader resizes the images fine, but a moiré is introduced into the final image. Is there any way to help prevent this from happening?
Here is an example:
http://205.238.27.187/Hagan/site/Artwork-Detail.cfm?ArtistsID=1110&NewID=10709
This is not because of the quality setting.
Most browsers use linear interpolation rather than bicubic when resizing images.
Fine Uploader uses the default browser image resizing algorithm.
The solution I've found is limby-resize. It uses pixel averaging/a much better resizing algo but is more CPU intensive. There is a link to a demo in the readme file. (Fine Uploader uses the "Crappy" method)
In megapix-image.js around line #168 or in the fine uploader source code,
Replace:
else {
ctx.drawImage(img, 0, 0, width, height);
}
canvas.qqImageRendered && canvas.qqImageRendered();
With:
else {
var tmpCanvas = document.createElement("canvas");
tmpCanvas.width = iw;
tmpCanvas.height = ih;
var tmpCtx = tmpCanvas.getContext("2d");
tmpCtx.drawImage(img, 0, 0);
canvasResize(tmpCanvas, canvas, function () {
alert("Image resized by limby-resize");
canvas.qqImageRendered && canvas.qqImageRendered();
});
}
And include limby-resize's canvas_resize.js before the fine uploader js file in your HTML.
Related
I'm currently working on creating pdf files with jspdf and the AutoTable plugin.
My plan is to create a table like this:
I have the images as local urls, and I'm trying to add them to the pdf using the new Image and adding them as .src to the image.
When I directly run the jspdf.addImage function with the image, the images display correctly.
But I'm struggling to get the correct scaling to work. So I wanted to use the width and height properties from the image, but for this to work you need to wait for the image to load.
I tried to use the onload function, but it stops rendering the table in general, because it skips over the function and continues with the next table before the images load.
If you have any suggestions of how to get something like this to work it would be greatly appreciated. The images all have variable resolution and need to be scaled down to properly fit in the table. I'll paste my working code (but without the height and width scaling) below.
doc.autoTable({
head: [{comments: 'Photos'}],
body: body,
styles: {
lineColor: [0, 0, 0],
lineWidth: 0.4,
},
headStyles: {
fillColor: [191, 191, 191],
textColor: [0, 0, 0],
},
didDrawCell: function (data) {
if (data.section === 'body') {
console.log(data);
const image = new Image();
// image.onload = function() {
// console.log(this);
// const width = this.width;
// const height = this.height;
// console.log({width, height})
// doc.addImage(
// this,
// 'JPEG',
// data.cell.x + 5,
// data.cell.y + 2,
// )
// }
image.src = QuestionPhotos.link(photosObject[data.cell.raw])
doc.addImage(
image,
'JPEG',
data.cell.x + 5,
data.cell.y + 2,
)
}
}
The commented out part of this code was my other attempt where I would add the image after it was loaded, but this made the image not appear at all in the pdf.
I have been able to solve most of my question using the following functions:
The scaling I was able to fix by storing the width and height together with my images. I then set my height to be fixed (in my case 80mm) and calculated the width like this: photo.height / photo.width * 80.
I tried the other functions Ihsan mentioned, but without any luck.
The didDrawCell is used for inserting the images after the cell has been drawn. willDrawCell draws the image behind the table. didParseCell will insert the images in the top corner of the page instead of in the table itself.
I also initially used the didParseCell to increase the size of the cells to be the correct size for the images, but later on changed this to adding the style when creating the body of the table.
body.push([{content:'', styles: {minCellHeight: height + 10}}]);
I kept track of the row index to know at what rows to insert the image and so that the sizing is correct.
I'm trying to resize my image size before uploading it to server. I got to know that one can resize the image by keeping its aspect ratio using image asset. Though the image size was reduced the quality is very poor, and one more option i found is bitmap factory.
So, by using bitmap does the image quality is better than using image asset. kindly clarify this. Since the plugin is giving lot of errors currently. i don't want to waste time solving those if i don't get better quality images.
When it comes to resizing the image, both image-asset module and bitmap factory plugin does the same job.
Apart from resizing, the bitmap factory plugin also allows you to draw objects / write text over image. I'm not sure how it makes you a difference with image quality, but if you check the code it is almost the same for resizing.
I tried with both image resizing, and i don't know why i see some
better quality image from bitmap than image asset
. you can check yourself with this below code.
For Bitmap
let w = imageSourceModule.fromFile(img).width;
let h = imageSourceModule.fromFile(img).height;
var bmp = BitmapFactory.create(w, h);
const asset_1 = new ImageAsset(img);
imageSourceModule.fromAsset(asset_1)
.then(img_1 => {
bmp.dispose(function (b) {
b.insert(BitmapFactory.makeMutable(img_1));
// ## Max dimension. Respects aspect ratio.
var b2 = b.resizeMax(250);
var thumb_image = b2.toImageSource();
console.log("-----thumb_image------");
console.log(thumb_image);
if (thumb_image) {
console.log("bit map File successfully deleted....!");
thumb_image.saveToFile(pathDest_1, "jpg");
}
});
})
For Image Asset
const asset = new ImageAsset(img);
asset.options = {
width: 250,
height: 250,
keepAspectRatio: true,
autoScaleFactor: true,
};
imageSourceModule.fromAsset(asset)
.then(img => {
img.saveToFile(pathDest, "jpg");
})
I am using ESRI basemaps with Mapbox-GL-JS. I am trying to capture a screenshot of the map using the following code:
this.map.getCanvas().toBlob(function (blob) {
canvasContext.strokeStyle = '#CCCCCC';
canvasContext.strokeRect(leftPosition, topPosition, width, height);
var img = new Image();
img.setAttribute("crossOrigin", "anonymous");
var srcURL = URL.createObjectURL(blob);
img.onload = function () {
canvasContext.drawImage(img, leftPosition, topPosition, width, height);
URL.revokeObjectURL(srcURL);
};
img.src = srcURL;
});
I am not able to figure out why the attribution on the Map is not getting captured in the screenshot. I understand that here I am just trying to get the canvas of the map. I even tried adding text elements to the map canvas and that doesn't work either. I have markers & routes, which get in the image correctly. I also tried using the Mapbox basemap and try the same, but faced the same issue.
Any help is highly appreciated!
map.getCanvas() will only return the Map's canvas not any of the HTML Elements which sit over the map like the controls, Mapbox logo or attribution text. Sam Murphy has been working on an example showing how to capture the Map including the Logo and Attribution text to an image which you can see at https://github.com/mapbox/mapbox-gl-js/pull/6518/files.
Since we can't easily capture an HTML Element to an image in JavaScript the attribution text is re-created in a canvas drawn into the Image.
I am currently working on a solution, where I crop an image to a rectangle using jcrop so I can use it as a texture for a 3D cube (in three.js)
AND I can save the cropped area as an image on the server.
The Problem here is, that the cropped image looks not good, it has low quality.
At first I thought it has something to do with the DPI, because it saves in 96 DPI, but some images that I upload do also have 96 dpi and have good quality.
I think it has something to do with jcrop. Do someone know or had any experience with jcrop regarding this issue? Or should I use a different plugin?
Original Image
Cropped Image
why don't you use php resize image system.
i am using it on my website.
Check demo resize wallpaper (check screen shoot) : Happy diwali wallpaper
and original wallpaper (download button as well as below resize option at the page) diwali wallpaper
you ca use
function resize($newWidth, $targetFile, $originalFile) {
$info = getimagesize($originalFile);
$mime = $info['mime'];
switch ($mime) {
case 'image/jpeg':
$image_create_func = 'imagecreatefromjpeg';
$image_save_func = 'imagejpeg';
$new_image_ext = 'jpg';
break;
case 'image/png':
$image_create_func = 'imagecreatefrompng';
$image_save_func = 'imagepng';
$new_image_ext = 'png';
break;
case 'image/gif':
$image_create_func = 'imagecreatefromgif';
$image_save_func = 'imagegif';
$new_image_ext = 'gif';
break;
default:
throw new Exception('Unknown image type.');
}
$img = $image_create_func($originalFile);
list($width, $height) = getimagesize($originalFile);
$newHeight = ($height / $width) * $newWidth;
$tmp = imagecreatetruecolor($newWidth, $newHeight);
imagecopyresampled($tmp, $img, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
if (file_exists($targetFile)) {
unlink($targetFile);
}
$image_save_func($tmp, "$targetFile.$new_image_ext");
}
Source: Resize images with PHP, support PNG, JPG
I am a beginner programmer in javascript. I don't use jQuery! And I want to make a simple game.
I am loading multiple images into canvas using
imageObj.onload = function(){}
I am using a keylistener for multiple keypresses so that the images could move on the diagonal while pressing both up and left keys by using smth like this:
function keydown_handler(e){my_key[String.fromCharCode(e.keyCode)] =
true; Move();}
My problem is that when I press the keys and move the images on the canvas the image flickers. I suppose this is because it loads the image every time I press a key. If this is true how can I load an image ONCE into memory and then RECALL that image from memory and change it's coordinates?
Thank you!
Well, what you really need to do is to create a render loop with javascript using requestAnimationFrame(), and render with the canvas element. Here's a really basic example of rendering with HTML5:
<!DOCTYPE html>
<html>
<body>
<canvas id="gameCanvas" width="800px" height="600px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('gameCanvas');
var context = canvas.getContext('2d');
var myImage = new Image();
var myImage.onload=function(){init();};
var myImage.src='location/of/image.png';
var imageX = 0, imageY = 0;
function render()
{
window.requestAnimationFrame(render);
// clear canvas
canvas.width = canvas.width;
context.drawImage(myImage, imageX, imageY);
imageX++;
imageY++;
}
function init()
{
window.requestAnimationFrame(render);
}
</script>
</body>
</html>
There will never be flicker when you're rendering through a canvas since the browser is already double buffering that rendering surface; and manually double buffering the canvas will actually produce a significant drop in framerate. What you're probably encountering (if you're rendering through a canvas) is tearing of the frame. Using requestAnimationFrame will resolve the tearing problem by essentially v-syncing the render (since it waits until the end of code execution to render).
Hopefully this will help you get started on the right path for rendering with HTML5.
What you are referring to is a very common problem when dealing with animations. The issue has less to do with what is stored in memory and more to do with the way an animation must be redrawn each time something changes. The most common method for avoiding this flickering issue is known as double buffering.
I have never done this using HTML5 specifically but after a quick search I found this article that may help you.
https://stackoverflow.com/a/2864533/594558