Работа с изображением
есть код, который ресайзит картинку, поворачивает
на экране картинка выглядит качественно. но ..полученная после преобразования в canvas картинка имеет паршивое качество. как сделать преобразования картинки в webgl? как сделать скриншот части картинки с экрана? другие варианты? |
Дублируете.
Покажите проблему лицом. Нужен запускаемый скрипт с вашими трансформациями, возможно проблема в вашем скрипте а не в канвас. |
Вложений: 6
код
картинка масштабируется, поворачивается, позиционируется таким образом чтоб нужный её фрагмент был вписан в рамку (70px*70px) canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var pic = new Image(); pic.src = $('#img').attr('src'); var sq = Math.sqrt(crop.width * crop.width + crop.height * crop.height); var k = crop.width / crop.height; var wc, hc; if (k >= 1) { wc = sq; hc = sq / k; } else { wc = sq; hc = sq / k; } var x = new_img.x * pic.width / new_img.width - wc / 2 / img.scale; var y = new_img.y * pic.height / new_img.height - hc / 2 / img.scale; var w = wc / img.scale; var h = hc / img.scale; canvas.height = hc; canvas.width = wc; context.fillStyle = '#ffffff'; context.fillRect(0, 0, wc, hc); context.drawImage(pic, x, y, w, h, 0, 0, wc, hc); pic.src = canvas.toDataURL("image/jpeg", 1); context.translate(wc / 2, hc / 2); context.rotate((img.rotate * Math.PI) / 180); context.drawImage(pic, -wc / 2, -hc / 2); pic.src = canvas.toDataURL("image/jpeg", 1); canvas.height = crop.height; canvas.width = crop.width; x = (wc - crop.width) / 2; y = (hc - crop.height) / 2; context.drawImage(pic, x, y, crop.width, crop.height, 0, 0, crop.width, crop.height); document.querySelector('.cropped').innerHTML += '<div ><img id="' + crop.id + '" src="' + canvas.toDataURL("image/jpeg", 1) + '"></div>'; картинки с рамкой - скриншоты с экрана, то как выглядит картинка после позиционирования без рамки - после обрезки canvas PS кроссбраузерность не нужна, хром, мозилла(показан результат в хроме) PSPS а в мозиле данный код не работает... для желающих проверить - могу выслать весь код странички. |
Если ты берёшь растр из маленького канваса, да ещё в Jpeg то результат и вправду будет лажовый.
Давай попробуем обойтись без того чтобы забирать данные из канвас, вместо этого источником данных всегда будет оригинальное изображение. Берём морду кота вырезаем crop И масштабируем вырезанный результат на весь доступный канвас с поворотом на 90градусов, обрати внимание что в качестве мы не теряем <b>Зум в канвас. В большой и в маленький</b></br> <canvas id="myCanvas" width="500" height="500"></canvas> <canvas id="myCanvas2" width="70" height="70"></canvas> <br/> <b>original</b><br/> <img id="test" src="http://rsm.haber365.com/N/1296202473_22_kedicik-22.jpg"> <script> function zoomAndRotate(imageObj,ctx,x,y,width,height){ ctx.rotate(90 * Math.PI / 180); ctx.translate(0,-ctx.canvas.width); ctx.drawImage(imageObj, x, y, width,height,0,0,ctx.canvas.width,ctx.canvas.height); ctx.setTransform(1, 0, 0, 1, 0, 0); //return ctx.getImageData(0, 0, width, height); } function drawImage(imageObj) { //example 1 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var zoomResult=zoomAndRotate(imageObj, context, 160,140,260,250); //example 2 var canvas2 = document.getElementById('myCanvas2'); var context2 = canvas2.getContext('2d'); var zoomResult2=zoomAndRotate(imageObj, context2, 160,140,260,250); } document.getElementById('test').onload=function(){ drawImage(this); } </script> Если нужно вырезать часть из вырезанной картинки то нужно вновь брать растр из оригинальной картинки но не в коем случае не из канваса в который масштабировал иначе будет ужасный результат |
Лови второй пример с тремя последовательными увеличениями без обращения к данным в канвасе.
Координаты crop в zoom указываются в процентах тобишь от 0(0%) до 1 (100%). <b>три зума, каждый последующий увеличивает картинку из предыдущего</b></br> <canvas id="myCanvas" width="250" height="250"></canvas> <canvas id="myCanvas2" width="250" height="250"></canvas> <canvas id="myCanvas3" width="250" height="250"></canvas> <br/> <b>original</b><br/> <img id="test" src="http://rsm.haber365.com/N/1296202473_22_kedicik-22.jpg"> <script> function zoom(imageObj,ctx,x,y,width,height,opt){ opt=opt||{}; var w=opt.w||imageObj.width; var h=opt.h||imageObj.height; var offsetX=opt.x||0; var offsetY=opt.y||0; ctx.drawImage(imageObj, (x*w)+offsetX, (y*h)+offsetY, width*w,height*h, 0,0,ctx.canvas.width,ctx.canvas.height); ctx.setTransform(1, 0, 0, 1, 0, 0); return { w:w*width, h:h*height, x:(x*w)+offsetX, y:(y*h)+offsetY } } function drawImage(imageObj) { //zoom 1 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var zoomResult=zoom(imageObj, context, 0.2,0.2, 0.5,0.5); //zoom 2 var canvas2 = document.getElementById('myCanvas2'); var context2 = canvas2.getContext('2d'); var zoomResult2=zoom(imageObj, context2, 0.3, 0.33, 0.4,0.4, zoomResult); //zoom 3 var canvas3 = document.getElementById('myCanvas3'); var context3 = canvas3.getContext('2d'); var zoomResult3=zoom(imageObj, context3, 0.1, 0.08, 0.4, 0.4, zoomResult2); } document.getElementById('test').onload=function(){ drawImage(this); } </script> |
Часовой пояс GMT +3, время: 01:22. |