Кроппинг изображения в канвас
Есть 2 дива. В image-orig оригинальное изображение. В image-crop генерируемая в канвасе превьюшка.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<div id="image-orig">
<img src="image_example.jpg"/>
</div>
<div id="image-crop">
<canvas id="preview" style="width:548px;height:387px"></canvas>
</div>
Само изображение, может быть любого разрешения.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
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 это коэффициент если оригинальное изображение не влазит в див.
Собственно проблема -
Все отлично работает, но если посмотреть на 2ой див (канвас), то можно увидеть, что качество превью очень плохое.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<div id="image-orig">
<img src="image_example.jpg"/>
</div>
<div id="image-crop">
<canvas id="preview" style="width:548px;height:387px"></canvas>
</div>
Само изображение, может быть любого разрешения.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
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 это коэффициент если оригинальное изображение не влазит в див.
Собственно проблема -
Все отлично работает, но если посмотреть на 2ой див (канвас), то можно увидеть, что качество превью очень плохое.