Resize the image with HTML5 Canvas - distortion
Hi all
I'm working on a Webworks app where I need to resize an image to upload it to a server. I use JQuery Mobile, the application should run on OS6 and upward. The user can use the camera or select a picture, the power off. The corresponding code is the following:
function handleOpenedFile(fullPath, blobData) {
var image = new Image();
image.src=fullPath; //path to image
image.onload = function () {
var resized = resizeMe(image); // send it to canvas
//Do stuff with the DataURL returned from resizeMe()
};
}
function resizeMe(img) {
var canvas = document.createElement('canvas');
var width = Math.round(img.width / 2);
var height = Math.round(img.height / 2);
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
return canvas.toDataURL("image/jpeg", 0.8);
}
I then use the Base64 in the DataURL for download on the server. The images are reduced, but they are truncated. Parts of the image are shifted autour and colors come out strange. It is not scaling in itself than the mess to the top of the picture it comes out garbled if you draw on the canvas without any scaling.
Does anyone have an idea how to solve this problem or have another suggestion to resize an image for download?
I managed to solve the problem of resizing for anyone who takes place also in this. Replacement of
return canvas.toDataURL("image/jpeg", 0.8);
with
return canvas.toDataURL();
solved the problem with the strange visual artifacts. Returns a picture of resized without any strangeness.
Tags: BlackBerry Developers
Similar Questions
-
Dynamic resizing of Textfield with HTML5 Canvas?
Hello
If my company is currently using Flash CS4 because all our AS2 code. I really want to move from the dark ages to Adobe animate CC. One of the main drivers is HTML5 Canvas and be able to support all mobile devices.
So that this transition to work, I need to be able to do 2 things from the start:
1. I need to get the variables passed in the ColdFusion page that is generated flash animation.
2. I need to manipulate the data (like the formatting of phone number)
3. I need to be able to keep the text fields in a defined width and mitigate the text to fit without distortion.
EX: If I didn't do this in AS2 it would work. Did not understand how to do the same thing to animate:
If (this ._width > 200) {}
This ._width = 200;
}
This stuff is possible with Adobe animate CC? It is possible with HTML5 Canvas or should I publish with air?
Is there a site that shows all the animated objects and properties that can be manipulated with Javascript for use with the Web?
If possible, I'd love to be able to save an image to preview at run time and possibly make web-to-print
In canvas mode, all audiovisual operations are managed by the library of CreateJS. There is a lot of documentation and examples for that flow. Very little of it is explicitly linked to the Flanimate IDE.
You cannot directly set the width and height on the CreateJS objects. You can set the scaling factors X and Y, which should be sufficient if you are willing to do a little math.
Width and height of determining dynamic objects can be difficult, because CreateJS is limited by what supports the HTML5 canvas API. There is a blog post, discuss the issue here:
-
Resize the Image with the wheel causing exception 1502
Description:
I load an image inside a container of border and when I Zoom out, scroll bars disappear as expected. Now, when I resize the image to exceed the limits of the boarder container I get exception below. In my view, the exception is thrown when the scroll bars are reactivated but I could be wrong. Someone has seen this before
Exception:
Error: Error #1502: A script has executed for longer than the default timeout period of 15 seconds. at spark.components.supportClasses::ScrollBarBase/get viewport() at spark.components::VScrollBar/updateMaximumAndPageSize()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\VScrollBar.as:123] at spark.components::VScrollBar/http://www.adobe.com/2006/flex/mx/internal::viewportResizeHandler()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\VScrollBar.as:390] at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:12266] at mx.core::UIComponent/dispatchResizeEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9641] at mx.core::UIComponent/setActualSize()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9172] at spark.components::Group/setActualSize()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\Group.as:891] at mx.core::LayoutElementUIComponentUtils$/setLayoutBoundsSize()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\LayoutElementUIComponentUtils.as:497] at mx.core::UIComponent/setLayoutBoundsSize()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:13069] at spark.components.supportClasses::ScrollerLayout/updateDisplayList()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\supportClasses\ScrollerLayout.as:546] at spark.components.supportClasses::GroupBase/updateDisplayList()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\supportClasses\GroupBase.as:1224] at spark.components::Group/updateDisplayList()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\Group.as:899] at spark.skins::SparkSkin/updateDisplayList()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\skins\SparkSkin.as:191] at mx.core::UIComponent/validateDisplayList()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8531] at mx.managers::LayoutManager/validateDisplayList()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:663] at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:736] at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072] at flash.utils::Timer/_timerDispatch() at flash.utils::Timer/tick()
MXML code:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:ns1="com.adobe.wheelerstreet.fig.panzoom.*" pageTitle="FileNet Flex Viewer" minWidth="955" minHeight="600" creationComplete="init()"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; /* s|Application { backgroundGradientColors: #000000, #222222; } */ s|Button#zoomInButton { skinClass: ClassReference("skins.ZoomIn"); } s|Button#zoomOutButton { skinClass: ClassReference("skins.ZoomOut"); } s|Button#fitToWindowButton { skinClass: ClassReference("skins.FitToWindow"); } s|Button#fitToWidthButton { skinClass: ClassReference("skins.FitToWidth"); } s|Button#fitToHeightButton { skinClass: ClassReference("skins.FitToHeight"); } s|Button#rotateRightButton { skinClass: ClassReference("skins.RotateRight"); } s|Button#rotateLeftButton { skinClass: ClassReference("skins.RotateLeft"); } s|ToggleButton#rubberBandZoomButton { skinClass: ClassReference("skins.RubberBand"); } </fx:Style> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here <s:Rotate id="rotator" angleFrom="{angle-90}" angleTo="{angle}" target="{img}"/> --> <s:Resize id="resize" target="{img}"/> <s:Rotate id="rotate" target="{img}"/> <!--<s:Resize id="contract" target="{img}"/> --> </fx:Declarations> <fx:Script> <![CDATA[ import flash.net.navigateToURL; import mx.controls.Alert; [Bindable] private var _imageURL:String = "images/earth-map_small.jpg"; [Bindable] public var angle:Number = 0; [Bindable] private var borderHeight:Number; [Bindable] private var borderWidth:Number; private var effectDuration:Number = 250; private var defaultRotation:Number = 90; private var profits:Array; private var dragStart:Point; private var dragEnd:Point; private var zoomingEnabled:Boolean; public var originalHeight:Number; public var originalWidth:Number; public function init():void{ originalHeight = img.height; originalWidth = img.width; borderHeight = borderContainer.height - 5; borderWidth = borderContainer.width - 5; } public function fitToWindow():void{ resize.end(); resize.duration = effectDuration; if(img.rotation == defaultRotation || img.rotation == -defaultRotation){ resize.heightTo = borderWidth; resize.widthTo = borderHeight; } else{ resize.heightTo = borderHeight; resize.widthTo = borderWidth; } resize.play(); } public function fitToWidth():void{ resize.end(); resize.duration = effectDuration; if(img.rotation == defaultRotation || img.rotation == -defaultRotation){ resize.heightTo = borderWidth; } else{ resize.widthTo = borderWidth; } resize.play(); } public function fitToHeight():void{ resize.end(); resize.duration = effectDuration; if(img.rotation == defaultRotation || img.rotation == -defaultRotation){ resize.widthTo = borderHeight; } else{ resize.heightTo = borderHeight; } resize.play(); } public function zoomIn():void{ resize.end(); resize.duration = effectDuration; resize.heightTo = img.height*2; resize.widthTo = img.width*2; resize.play(); } public function zoomOut():void{ resize.end(); resize.duration = effectDuration; resize.heightTo = img.height/2; resize.widthTo = img.width/2; resize.play(); } public function rotateRight():void{ rotate.end(); rotate.duration = effectDuration-200; rotate.angleFrom = angle; rotate.angleTo = (angle += defaultRotation); rotate.play(); } public function rotateLeft():void{ rotate.end(); rotate.duration = effectDuration-200; rotate.angleFrom = angle; rotate.angleTo = (angle -= defaultRotation); rotate.play(); } private function initRectangle(e:MouseEvent):void{ } private function showShowRectangle(e:MouseEvent):void{ } private function clearRectangle(e:MouseEvent):void{ } ]]> </fx:Script> <s:Panel id="mainPanel" left="5" right="5" top="5" bottom="5" title="FileNet Flex Viewer" fontWeight="bold"> <mx:ApplicationControlBar dock="true" top="0" left="0" right="0"> <s:Button id="zoomInButton" toolTip="Zoom In" click="{zoomIn();}" /> <s:Button id="zoomOutButton" toolTip="Zoom Out" click="{zoomOut();}" /> <s:Button id="fitToWindowButton" toolTip="Fit To Window" click="{fitToWindow();}" /> <s:Button id="fitToWidthButton" toolTip="Fit To Width" click="{fitToWidth();}" /> <s:Button id="fitToHeightButton" toolTip="Fit To Height" click="{fitToHeight();}" /> <s:Button id="rotateRightButton" toolTip="Rotate Right" click="{rotateRight();}" /> <s:Button id="rotateLeftButton" toolTip="Rotate Left" click="{rotateLeft();}" /> <!--<s:ToggleButton id="rubberBandZoomButton" toolTip="Rubber Band Zoom" click="{}" /> --> </mx:ApplicationControlBar> <s:BorderContainer id="borderContainer" right="5" left="5" top="40" bottom="5"> <s:Scroller width="100%" height="100%"> <s:Group> <mx:Image id="img" maintainAspectRatio="false" maintainProjectionCenter="true" source="@Embed('images/earth-map_small.jpg')" verticalCenter="0" horizontalCenter="0" horizontalAlign="center" verticalAlign="middle"/> </s:Group> </s:Scroller> </s:BorderContainer> </s:Panel> </s:Application>I think that this smaller version shows the consisently (attached JPG) question:
xmlns:s = "library://ns.adobe.com/flex/spark".
xmlns:MX = "library://ns.adobe.com/flex/mx" >
public function fitToWindow (): void {}
IMG. Height = borderContainer.height;
IMG. Width = borderContainer.width;
}
]]>
horizontalCenter = red '0' = '0' / >
Looks like the interaction of Red/horizontalCenter with the add/remove scroll bars causes a loop. Can you please fill a bug report and post the link here? (Or let me know if you prefer that I have put it).
The workarounds are:
1. in the fitToWindow() method to subtract enough pixels to consider both sides of the border, for example:
public function fitToWindow (): void {}
IMG. Height = borderContainer.height - 2;
IMG. Width = borderContainer.width - 2;
}2. always keep the scroll bars displayed, for example:
3. instead of use BorderContainer use SkinnableContainer/group and draw the border outside the container, for example:
horizontalCenter = red '0' = '0' / >
Let me know if these solutions of workaround for the case also reduces work for your application.
-
resize the image in the Image element
Hello
I have an element of the Image corresponding to a blob column in my data base. I store image files there, then I retrieve and display images in this point of the Image. the question is how can I resize the Image with respect to the dimensions of the part of the Image? Here is an example [http://img25.imageshack.us/i/photoadx.jpg/]. This image is larger that it is displayed, so I need to see the entire image in this point of the Image.
How can I resize it?
Thank you!There is a Style property "calibration" for the image, set this "Adjust".
-
The Batch command to resize the image on the canvas is centered.
Hi all
I'm not quite the Fireworks guru so patient with me. I use Fireworks for many batch image optimization of the things I do for our company Web site. I use simple batch commands to run on a directory of files. Export of batches, batch resize etc.
I need to do something more sophisticated with the batch command and Im not quite sure how to do it, ot if there is an existing jsf file or extension I can grab for it (in batch).
I have a bunch of images that vary slightly in width and height. I need to resize a specific background and Center it on the canvas. Thus, for example, when I run the batch, he creates a transparent canvas or white which is 400px x 400px and then takes the image and centers it in the Web. Basically, resize the image to fit in the center of the canvas. Any help or links would be appreciated. I tried recordign action to do so in the history panel, but I could never work.
I'm starting to feel like I'm talking me LO
I made a second order
400 x 400 canvas
any size of object
Select it
clear history
In the Align Panel, select "Position (that will be more dark grey) then Align Center horizontal and vertical (top row center icons).
the command
Recap:
Add images in batches
Add scale
Scale size 260 width height white
Orders add both (change the canvas and align)
process of
-
How to resize image in Html5 Canvas?
Hey, I try to width and height to resize the image using the code:
h01 = document.createElement('img'); h01.src = 'images/rambut/h01.png'; h01.width = 69; h01.height = 69; var images_h01 = new createjs.Bitmap(h01); this.mc_h01.addChild(images_h01);but the size of the image is not changing anything.
Help...
CreateJS is not a way to explicitly set the height and width of the image. If you already know the dimensions of the external image, just use some simple calculations to convert the dimensions in a scale factor. If you don't know the dimensions of the external image, you can access it from image.width and image.height. However, it will need to wait until the image is loaded.
Or, you could give up on the relationship between the image in CreateJS of DOM and just do float directly on the canvas yourself.
-
need to resize the image to a larger size and without distorting
need to resize the image to a larger size and without distorting
Every time you a high-end image you sacrifice quality and introduce artifacts.
-
resize the image in a div with css
Hi I have a slideshow and I load image dynamically with this code when I click on the thumb
($(sym.lookupSelector ("image1container")) .css ("background-image', ' url(images/ALBUM_01/album1_1.jpg)');
All good, but what an opportunity of css, I use to Center and resize the image in a div to 100% height and 100% width of the div?
It's my solution and it function
I have attached the external stylesheet in compositionReady;
$("_ _").appendTo ("#Stage");
myStyle. CSS is subsequently
@charset "utf-8";
/ * CSS document * /.
HTML, body, #container {}
height: 100%;
Width: 100%;
}
IMG {}
Max-width: 100%;
height: auto;
Width: auto\9; / * ie8 * /.
}
div {}
background-repeat: repeat no.;
background-size: 100% 100%;
}
on the edge of adobe in the rectangle that contains the image I put in class 'div '.
-
Size and align the Image with Perspective Warp
How do you get an image to the size and align it with the perspective distortion, unless I approach this wrong?
You don't say how you approaching. If something has a look of perspective. He has a perspective not shape, size and resolution. First of all, you need to resize the image to the size of the shape's aspect ratio. the boundaries of the shape. Hide the image resize to this form. Perspective transform the layer just perspective-looking mask. And also to position the layer.
To tell the truth do not know how to automate all this. Automate everything resizes images for the limits of the perspective transform the final location of the image. I align the image resize without perspective the limits of location and hide the image to the shape in the image of the perspective transformation. I finished the automation here. I leave the user with the responsibility to transform the layer to add the look of the perspective and rotation. I have no idea how to do to automate rotation and the appearance of perspective or create to a template that can be filled with automation of Photoshop.
-
Hi all
IAM getting the image to the server I need to resize the images, iam specifying an area it should resize and display with out streatch the image; as in a browser if I reduce the size of the browser, then the size of the image decreases as the correspondent. What should I do for this in the mobile? for this whole method in blackbery?
Thanks in advance.
Hi all
I solved the problem.
-
My html code created by animate cc was changed to php for me, because I send and received variables via get and catch the cookies and much more. the function that I used to call function on my .fla of the document is passId() and it worked before when animate was Flash pro with html5 canvas.
And function of .fla, I frame_0 only assign to the variable "id_usuario", this is the feature on fla:
First of all, the title of your thread is horrible. Titles are supposed to be securities, not paragraphs.
As for your problem, you are probably trying to call catchIdUser before it is defined. handleComplete() is raised when the content is ready to run. He did not actually yet. I guess you should have script code call the function of window parent, not the other way around.
-
Resize the image sources - change the size of the images database
Hi all
I have a trivial problem, but I can't deal with it. I have a project with compositions called slides. Each slide have JPG image as layer and this image is assigned 100% to 106% Resize effect (two keyframes). The images have their own folder. I need to replace all the images but the problem is that the new images have different sizes, for the most part, they are bigger than originals. When I right-click the imported images directly on I don't see any options to change their size (single space reserved or solid). When I double click them to open it in a new tab I don't see no resizing tool and layer menu is grayed out for the most part.
So far, I found that I have three possibilities:
1. resize as a layer in the composition of each slider. Unfortuately I don't see any way to change the database size, so resize here means add another keyframe or change existing. If I change the first keyframe on the layer in the composition of the slide then I have to proportionally resize the last of them. There are about 20 slides this process would be quite painful
2. resize the images before importing - with PSP, GIMP or same IrfanView. It would be a much better solution than before however, this means a blind resizing - without no preview as the composition. Whenever I want to change the size a bit, I have to import image again. Painful.
3 convert the images to the compositions,
Convert each JPG file in composition, put this composition as the layer to each composition drag next to layer JPG, transformation of copy of layer of JPG to the composition of the image layer and delete the JPG layer. Long process but the effect is exaclty as I want and the project is fairly durable for any other modification of the image. However, in larger projects where there are many effects assigned to layers, it would be very painful.
So is there an easy way to change the sizes of the imported images database? I can't believe that in such a huge program like After Effects, there is no way for such a simple task. I believe firmly im just something missing.
You can resize your layers in Ae with scale parameter. (transform-> scale). If there is no animation, you need not place a keyframe. for example, you can resize your layer to 46% and decide to evolve for a while, so the first keyframe will be 46%, and the last keyframe is 83%.
Yes, I know that if you have layer with no keyframes for the scale property then scaling ways to change the size of its base. However, in my example, I have two frames - 100% and 106%. If I import large image so I have to resize. If im on the first keyframe, and then it wil change its size to 100% for example, 56%. But the last keyframe is not changed - its still 106%. So that means animation past from 56% to 106% - image develops much more quickly than in an original animation.
But now I found that I can select all the points of the keyframe by clicking on the entire property scale and resize proportionally when I resize the image, all the points of the keyframe. It's the simplest and most effective solution for me!
Thanks for the help!
-
Cannot resize the image pasted on layer Photoshop CC 2015
I just upgraded to CC 2015 and reloading of the older versions of almost all the programs. In Photoshop CS6 I could stick an image on a layer and then take one of the corners to resize it. There is nothing to grab to resize the image in 2015 CC. Nothing! How am I suppose to resize the image and play with it, unless I can grab the corners and shrink and enlarge? Help!
Edit > Transform > scale.
Hold down the SHIFT key to keep the proportion
-
I have a model I am able to plug different images at different times. The problem is when I plug an image in this template, I think that the image is either too big or too small. Is it possible to connect the image in the template and resize the image (and not the template itself) OR I have to go into the file with the original image and resize them it there and then try to plug it into the model to see if it fits - and if it does not fit, return to the original with the image file and resize it again and see if this fits - and so on and so on...? "" I tried the "image size" option, but it's all or nothing - especially miss!
Thank you!
First, make sure that the original image is larger that you need. It is easier to delete pixels that so add nonexistent pixels.
Place the image in the template.
In the menu filters, choose Convert to smart object. (Make sure that the image layer is selected before doing this step)
Now reduce the size of the image of what you need (ctrl-t or cmd - t) when satisfied click return/enter.
Because the image layer is a smart object, you can replace the inner image in another image and the scale will remain the same. You will find the option to replace the image in the layers > smart menu object.
If you need assistance more let us know.
-
How to improve the resolution of the image with the help of filters
How to improve the resolution of the image with the help of filters?
resolution of the image, please check the links below. They should give you a clear idea about the resizing and resampling of images.
Understanding vs Resample resize | Learn Photoshop CS6 | Adobe TV
See you soon!
~ David
Maybe you are looking for
-
Graphics memory ATI 128 MB to 256 MB on Satellite L20
HelloIt is possible increase graphics memory ATI 128 MB to 256 MB on my Satellite L20 182?Maybe upgrade the BIOS?
-
get adobe internal error after loading Vista service pack 2
After leaving Vista service Pack 2 to finally load my ADobe reader now not allow me to view or print in HTML?
-
BlackBerry smartphone how to extend the number of rings before answering
Hi people, My first visit here and I'm certainly not geek. I am trying to find the solution to extend the period of my phone rings (8520), before ringing not. Any ideas would be greatly appreciated.
-
v11.1.1.3 - getCSSConfigFile in SSP / Essbase 11.1.2.3
In Essbase 11.1.1.3 allowing us to use the link " " http:// " < servername >: 28080, interoperability, framework, getCSSConfigFile ' to get a XML file indicating providers utility and shared Research Services order.In v 11.1.2.3 this does not work an
-
Anyone having problems with the timecode effect. Not sure if it of a bug or has changed the way it works.I add an adjustment layer on a top rail on an edited program. Source range set the value to none and options to generate.If there is a break in t