Я использую телефонный разрыв, который относительно не важен для вопроса.Когда я делаю вертикальное изображение, используя capture.captureImage, оно возвращается по горизонтали.
В любом случае, я хочу повернуть изображение вертикально, как это было, когда я делала фотографию, расширяясь до верха и низавновь созданный эскиз шириной 160 пикселей и высотой 90 пикселей (16: 9) .Я хочу сохранить его перевернутое соотношение сторон (как это было, когда я делал снимок) из 9:16 в пределах 16: 9, занимая всю высоту большого пальца 90px.
Ниже я показываю img, хотя код не будет работать, если вы не измените элемент id='captured_img' на локальный URL-адрес из-за проблем с внешним изображением src, связанных с canvas.toDataURL().Итак <img width='160' height='90' id='captured_img' src='mustBeLocal.png' />.Если вы хотите, вы можете просто щелкнуть правой кнопкой мыши и сохранить предоставленный мной img.
Если вы запустите тесты, вы увидите, что horizontal работает нормально.Однако по неизвестным мне причинам тест vertical показывает изображение, которое кажется меньше, чем его показанные размеры.
Если вы можете указать мне правильное направление, я был бы признателен.
var doc, M, I;
onload = function(){ // make sure DOM is loaded
doc = document;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
var captured_img = I('captured_img'), canvas = M('canvas'), ctx = canvas.getContext('2d'), horizontal = I('horizontal'), vertical = I('vertical');
var output_img = I('output_img');
function reuse(force){ // just using force because you're not on your phone
var iw = captured_img.width, ih = captured_img.height, w, h, hw = 0, hh = 0, s;
if(force || innerWidth < innerHeight){
h = 50.625*iw/ih; w = h*ih/iw; s = true;
}
else{
w = 160; h = w*ih/iw;
}
canvas.width = w; canvas.height = h;
console.log(w+'--'+h); // width and height are showing correctly
// formula was also tested using a 400 x 300 image and aspect results look good to me - 4:3 90px high
if(s){
hw = w/2; hh = h/2; ctx.translate(hw, hh); ctx.rotate(Math.PI/2);
}
ctx.drawImage(captured_img, -hw, -hh, w, h);
output_img.src = canvas.toDataURL(); ctx.restore();
}
horizontal.onclick = function(){
reuse();
}
vertical.onclick = function(){
reuse(true);
}
}// end load
#container{
width:160px; height:90px; background:#000; text-align:center;
}
#output_img{
vertical-align:middle;
}
#captured_img,#container{
border:1px solid gold;
}
input[type=button]{
margin-top:5px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='description' content='Test Page' /><meta name='keywords' content='test page, test template' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<h2>160 x 90 - 16:9 aspect ratio</h2>
<img width='160' height='90' id='captured_img' src='https://i.stack.imgur.com/nZQLy.png' alt='needs to be a local URL' />
<hr />
<div id='container'><img id='output_img' /></div>
<input id='horizontal' type='button' value='horizontal' />
<input id='vertical' type='button' value='vertical' />
</div>
</body>
</html>
Нет ошибки безопасности при использовании локального URL.Просто сохраните мое изображение и проверьте на XAMPP или WAMP.Код и изображение совершенно безопасны.