HTML5 Canvas биіктігі мен енін және мазмұнды ішкі масштабта орнатыңыз

Кенепте элементтің ені мен биіктігін орнатуға болады және осы жаңа өлшемдерге сәйкес келетін мазмұнды шкаласы бар ма?

Қазіргі уақытта пайдаланушы суретті жүктейді және менің бетім осы кескінді қамтитын кенепте элемент жасайды және өлшемдері кескін сияқты өлшем болып табылады. Мен жұмыс істеп жатқан өлшемді шектеуді қалаймын, алайда мен мына нәрсені көргім келеді:

  1. Пайдаланушы 1600 x 1200 пиксель (Серверге сақталмаған) суретті жүктейді
  2. Деректер html5 canvas нысанына сәйкес келеді
  3. Кенептің биіктігі мен ені 800 x 600 мәніне орнатылады және кескіннің мазмұны тиісті түрде таралады, содан кейін көрсетіледі.

Мен кенепте ені мен биіктігін орнатсам, дәл қазір сол мөлшерде суретті түсіріп аламын, қалағандай өлшемді өзгертпеймін. Рахмет!

4

2 жауаптар

There are many ways to call drawImage

Біреуі:

ctx.drawImage (сурет, sx, sy, sw, sh, dx, dy, dw, dh)

Dx, dy, dw, dh нүктелері x, y, ені және биіктігі болып табылады.

Егер Сіз әрқашан 800x600 және dh жасасаңыз, сурет автоматты түрде 800x600 дейін масштабталады.

Here's a tiny example that will always draw any size image to 800x600 http://jsfiddle.net/jAT8Y/

4
қосылды

Тағы бір балама - context.scale функциясын пайдалану. Егер масштабты қолдансаңыз, сурет сапасы жақсы болады.

1
қосылды