html5 - Crop image to canvas -

-

i have 2 divs

<div id="image-orig">     <img src="image_example.jpg"/> </div>  <div id="image-crop">     <canvas id="preview" style="width:548px;height:387px"></canvas> </div>

image_example.jpg can image size.

    function updatepreview(c) {         if(parseint(c.w) > 0) {             var orig = $("#image-orig img")[0];             var canvas = $("#image-crop canvas")[0];             var context = canvas.getcontext("2d");              context.drawimage(orig,                 c.x*coeff,c.y*coeff,c.w*coeff,c.h*coeff,                 0,0,canvas.width,canvas.height             );         }      }      $(function(){             $('#image-orig img').jcrop({                 onselect: updatepreview,                 onchange: updatepreview,                 aspectratio : parsefloat($('#image-orig img').width()/$('#image-orig img').height())             });     });

coeff - it's coefficient if size image larger div preview.

that's problem: http://dbwap.ru/3725988.png

in second div (canvas). quality image low.

solution found

            canvas.width = c.w*coeff;             canvas.height = c.h*coeff;              context.drawimage(orig,                 c.x*coeff,c.y*coeff,c.w*coeff,c.h*coeff,                 0,0,c.w*coeff,c.h*coeff             );             $(that.el).find("#imagecode").attr('src', canvas.todataurl());             $(that.el).find("#imagecode").show();

i'm creating image tag , copying canvas image.

if have access .net, can modify way new images saved jcrop: http://mironabramson.com/blog/post/2009/04/cropping-image-using-jquery,-jcrop-and-aspnet.aspx

solution available without using server-side (.net / php):

first, make sure when use jcrop have html5 canvas image smoothing enabled:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

if set, or has no effect, think other options investigate image option available through each browser:

enable smoothing in mozilla - see article example (look 'mozimagesmoothingenabled'):https://developer.mozilla.org/en/canvas_tutorial/using_images#controlling_image_scaling_behavior

apply filters in ie: http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/

note: there may sort of flash solution work difficult combine flash solution jcrop , html5 canvas.


Comments

Post a Comment

Popular posts from this blog

django - How can I change user group without delete record -

-
on website user have 1 group. , user can change group. it's made user.groups.clear() and user.groups.add(new_group) but it's not efficient, because there 2 sql query: delete, insert. how can change group update query? user , group related each other using manytomanyfield . means intersection table exists relating both entities, , if don't specify model map (using through attribute) django creates 1 you. looking @ sources django.contrib.auth.models see that's case. fortunatly, can access intermediary model using through attribute of manager (in case, user.groups.through ). can use regular model. example: >>> alice = user.objects.create_user('alice', 'alice@example.com', 'alicepw') >>> employee = group.objects.create(name='employee') >>> manager = group.objects.create(name='manager') >>> alice.groups.add(employee) >>> alice.groups.all() [<group: employee...
Read more

java - Need to add SOAP security token -

-
i need set custom soap header attribute on jax-ws generated webservice client. case webservice calls must go through proxy server requiring specific token (recieved web request header) present in soap request header. e.g.: 1 carserviceservice service = null; 2 service = new carserviceservice(new url(url), new qname(qname); 3 carserviceendpoint port = service.getcarserviceport(); it seems in line 3 wsdl retrieved , call fails due missing security token. 1 point direction on how done? a detailed example has been mentioned here: creating , deploying jax-ws web service on tomcat 6 this article shows how create , use security token .
Read more

java - EclipseLink JPA Object is not a known entity type -

-
i have strange problem eclipselink , object want persist. have 1 object (keypointlistimpl) stores object keypointimpl in list. persisting keypointimpl objects works great if try persist keypointlistimpl object java.lang.illegalargumentexception says object keypointimpl isn't known entity type. here keypointimpl code: @entity @table(name="keypoints") public class keypointimpl implements keypoint { @id @generatedvalue(strategy = generationtype.identity) private int id; @enumerated(enumtype.string) private detectortype keypointtype; private float x; private float y; private float size; private float angle; private float response; private int octave; private int classid; ... } here keypointlistimpl code: @entity @table(name="keypointlists") public class keypointlistimpl implements keypointlist { @id @generatedvalue(strategy = generationtype.identity) private int id; @onetoone(cascade={ca...
Read more