0
Мне было интересно, как бы я изменил «image.src» в javascript, не обновляя страницу (ну, не очищая холст).Изменение Javascript Variable без обновления
Я думал об использовании чего-то вроде AJAX (я никогда не использовал его раньше), но я не уверен, что это правильный путь. Может ли кто-нибудь помочь мне?
Вот мой код:
<form>
Image URL:<input type="text" size="50" name="i" value="<?php echo $_REQUEST['i']?>" />
Background Color:<select name="color" >
<?php if($_REQUEST['color'] == "#000000"){ ?>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<?php }else{ ?>
<option value="#ffffff">White</option>
<option value="#000000">Black</option>
<?php } ?>
</select>
<input type="submit"/> || Back to the <a href="/cloner/index.php">Home Page</a>
</form>
</div>
<script type="text/javascript">
var imageWidthHalf, imageHeightHalf;
var canvas = document.createElement('canvas');
var height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.height = height;
canvas.style.display = 'block';
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
var image = document.createElement('img');
image.addEventListener('load', function() {
imageWidthHalf = Math.floor(this.width/2);
imageHeightHalf = Math.floor(this.height/2);
document.addEventListener('mousemove', onMouseEvent, false);
document.addEventListener('touchstart', onTouchEvent, false);
document.addEventListener('touchmove', onTouchEvent, false);
}, false);
image.src = "<?php echo $_REQUEST['i']; ?>";
function onMouseEvent(event) {
context.drawImage(image, event.clientX - imageWidthHalf, event.clientY - '50' - imageHeightHalf);
}
function onTouchEvent(event) {
event.preventDefault();
for (var i = 0; i < event.touches.length; i++) {
context.drawImage(image, event.touches[i].pageX - imageWidthHalf, event.touches[i].pageY - imageHeightHalf);
}
}
</script>
, если вы можете позволить мне изменить код так, что она будет выглядеть лучше – ianace
Что вы хотите изменить 'img.src' к? Если на веб-странице javascript вы знаете URL-адрес, легко просто установить 'img.src = url'. Если вам нужно получить URL-адрес с сервера, вы должны использовать вызов ajax для извлечения URL-адреса, а затем назначить 'img.src'. – jfriend00
@ianace, если нужно, Но у меня есть ответ ниже от Джозефа Сильбера. – Alice