Question

我想让用户能够将自己的图像用于我的游戏（图片益智游戏），而不是使用我自己上传的默认图像。

因此，例如，游戏应该提示用户选择“使用默认图像”或“浏览自己的图像”来使用。我完全不知道从哪里开始，任何帮助将不胜感激。

干杯。

Answer 1

您可以使用默认图片，让用户使用文件input选择文件。如果用户选择了某个文件，请使用FileReader将其读取并转换为网址。并使用此URL。试试吧：

＆＃13;

var defaultImg = 'http://i.imgur.com/hMyn5YW.jpg',
    imgToUse = defaultImg;

document.getElementById('defaultBtn').addEventListener('click', startPuzzle);

document.getElementById('customImg').addEventListener('change', getCustomImg);

function getCustomImg(){
    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            imgToUse = e.target.result;
            startPuzzle();
        }

        reader.readAsDataURL(this.files[0]);
    } else {
        alert('No file was added');
    }
}

function startPuzzle(){
    document.body.innerHTML = '<img src="'+imgToUse+'"/>';
}

＆＃13;

<button id="defaultBtn">Use default image</button>

<p>or choose an image from your computer:</p>
<input type='file' id="customImg" />

＆＃13;

jQuery版本：

＆＃13;

var defaultImg = 'http://i.imgur.com/hMyn5YW.jpg',
    imgToUse   = defaultImg;

$('#defaultBtn').on('click', startPuzzle);

$('#customImg').on('change', getCustomImg);

function getCustomImg(){
    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            imgToUse = e.target.result;
            startPuzzle();
        }

        reader.readAsDataURL(this.files[0]);
    } else {
        alert('No file was added');
    }
}

function startPuzzle(){
    $('body').html('<img src="'+imgToUse+'"/>');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button id="defaultBtn">Use default image</button>

<p>or choose an image from your computer:</p>
<input type='file' id="customImg" />

＆＃13;

如何添加选项以使用户能够使用JavaScript将自己的图像添加到图片益智游戏中？

1 个答案: