文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用JavaScript进行图像传输

问如何使用JavaScript进行图像传输
EN

Stack Overflow用户

提问于 2018-12-03 00:04:33

回答 2查看 249关注 0票数 1

我想创造一些类似于“拼图”的东西。我已经插入了图片，并使用户可以输入行和列。

我如何实现(使用JavaScript)当用户点击图片并点击到一个空的正方形时，图片将复制并显示在那里？

你能给我指引正确的方向吗?我不知道该怎么开始，也不知道该用什么。

之后：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mario</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table,td {
            border: 1px solid grey;
            border-collapse: collapse;
            margin: 10px;
        }

        img {
            display: block;
        }

        td {
            border: 1px solid grey;
            width: 33px;
            height: 33px;
            background-color: silver;
        }

    </style>

</head>
<body>
    <table>
        <tr>
            <td><img src="images/sprite1.gif" alt="sprite1.gif"></td>
            <td><img src="images/sprite2.gif" alt="sprite2.gif"></td>
            <td><img src="images/sprite3.gif" alt="sprite3.gif"></td>
            <td><img src="images/sprite4.gif" alt="sprite4.gif"></td>
            <td><img src="images/sprite5.gif" alt="sprite5.gif"></td>
            <td><img src="images/sprite6.gif" alt="sprite6.gif"></td>
            <td><img src="images/sprite7.gif" alt="sprite7.gif"></td>
            <td><img src="images/sprite8.gif" alt="sprite8.gif"></td>
            <td><img src="images/sprite9.gif" alt="sprite9.gif"></td>
            <td><img src="images/sprite10.gif" alt="sprite10.gif"></td>
            <td><img src="images/sprite11.gif" alt="sprite11.gif"></td>
            <td><img src="images/sprite12.gif" alt="sprite12.gif"></td>
            <td><img src="images/sprite13.gif" alt="sprite13.gif"></td>
            <td><img src="images/sprite14.gif" alt="sprite14.gif"></td>
            <td><img src="images/sprite15.gif" alt="sprite15.gif"></td>
            <td><img src="images/sprite16.gif" alt="sprite16.gif"></td>
        </tr>
    </table>


<script>
    function el( tagName ) {
    return document.createElement( tagName );
    }

    var r = window.prompt("Please enter rows:"); //vrstica tr
    while(r<5 || r>20){
    r = window.prompt("Wrong, enter a number between 5 and 20:"); 
    }

    var c = window.prompt("Please enter columns:"); //stoplec td
    while(c<10 || c>40){
    c = window.prompt("Wrong, enter a number between 10 and 40:");
    }

    var table = el( 'table' );

    for ( var i = 0; i < r; i++ ) {

        var tr = el( 'tr' );

        for ( var j = 0; j < c; j++ ) {

            tr.appendChild( el( 'td' ) );        
        }

    table.appendChild( tr );
    }

    document.body.appendChild( table );
</script>

</body>

html

css

javascript

回答 2

Stack Overflow用户

发布于 2018-12-03 00:51:38

algotithm是“当用户点击图像时，获取src并存储在变量中。当用户单击空框时，检查它是否为空，然后附加存储在变量中图像标签src”

js中的代码行长于jquery，这就是我使用jquery的原因

有关表td link2上的java脚本onclick事件，请参阅此link

根据您在jquery中的请求：

var image="";
$(function(){

 $("table#im").find("td").click(function(){
    image=$(this).html();
   
 });
 $("table#box ").find("td").click(function(){
   
   if(image==""){
    alert("select image");
    
    }
    else{
      $(this).append(image);
    }
 });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mario</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table,td {
            border: 1px solid grey;
            border-collapse: collapse;
            margin: 10px;
        }

        img {
            display: block;
        }

        td {
            border: 1px solid grey;
            width: 33px;
            height: 33px;
            background-color: silver;
        }

    </style>

</head>
<body>
<table id="im">
        <tr>
            <td><img src="images/sprite1.gif" alt="sprite1.gif"></td>
            <td><img src="images/sprite2.gif" alt="sprite2.gif"></td>
            <td><img src="images/sprite3.gif" alt="sprite3.gif"></td>
            <td><img src="images/sprite4.gif" alt="sprite4.gif"></td>
            <td><img src="images/sprite5.gif" alt="sprite5.gif"></td>
            <td><img src="images/sprite6.gif" alt="sprite6.gif"></td>
            <td><img src="images/sprite7.gif" alt="sprite7.gif"></td>
            <td><img src="images/sprite8.gif" alt="sprite8.gif"></td>
            <td><img src="images/sprite9.gif" alt="sprite9.gif"></td>
            <td><img src="images/sprite10.gif" alt="sprite10.gif"></td>
            <td><img src="images/sprite11.gif" alt="sprite11.gif"></td>
            <td><img src="images/sprite12.gif" alt="sprite12.gif"></td>
            <td><img src="images/sprite13.gif" alt="sprite13.gif"></td>
            <td><img src="images/sprite14.gif" alt="sprite14.gif"></td>
            <td><img src="images/sprite15.gif" alt="sprite15.gif"></td>
            <td><img src="images/sprite16.gif" alt="sprite16.gif"></td>
        </tr>
    </table>

<br><br><br><br><br>
<table id=box>
        <tr>
           <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

票数 0

Stack Overflow用户

发布于 2018-12-03 03:05:08

因为您已经有了一个图像条带，所以可以使用CSS sprite方法。

加载图像条，然后使用类显示图像条的相关部分。

这是一个带有菜单中的图标和一个小网格的示例。单击任意图像，然后单击网格中的一个正方形即可添加图标。

注意，这个例子并不是完美的像素，但它可以让你知道如何继续下去。

const grid = document.querySelector('.grid');

// Listen for clicks on the grid
grid.addEventListener('click', handleClick, false);

const menu = document.querySelector('.menu');

// Listen for clicks in the menu
menu.addEventListener('click', handleMenu, false);

const html = [];
const type = [];

// Create a blank grid
for (let i = 0; i < 36; i++) {
  html.push('<div class="block"></div>');
}

// ...and add it to the grid element
grid.insertAdjacentHTML('beforeend', html.join(''));

function handleClick(e) {

  // Change the class of the grid cell to match the icon
  // by shifting the first element off the type array
  e.target.className = `image block ${type.shift()}`;
}


// When an icon is clicked, push the icon class to
// the `type` array
function handleMenu(e) {
  const { classList } = e.target;
  type.push(classList[2]);
  classList.add('highlight');
}

* {
  box-sizing: border-box;
}
 
.image {
  background-image: url('https://i.imgur.com/LrpJqJ7.png');
  background-repeat: no-repeat;
  height: 46px;
  width: 702px;
}

.block {
  border: 1px solid #dfdfdf;
  width: 42px;
  height: 42px;
  background-color: #efefef;
}

.highlight {
  border: 2px solid black;
}

.questionmark {
  background-position: -1px -1px;
}

.panel {
  background-position: -45px -1px;
}

.wall {
  background-position: -89px 0px;
}

.pyramid {
  background-position: -134px 0px;
}

.snail {
  background-position: -178px 0px;
}

.toadstool {
  background-position: -222px 0px;
}

.coin {
  background-position: -266px 0px;
}

.b-left {
  background-position: -310px 0px;
}

.b-center {
  background-position: -354px 0px;
}

.b-right {
  background-position: -398px 0px;
}

.pipe-top-left {
  background-position: -442px 0px;
}

.pipe-top-right {
  background-position: -486px 0px;
}

.pipe-left {
  background-position: -530px 0px;
}

.pipe-right {
  background-position: -574px 0px;
}

.cloud {
  background-position: -618px 0px;
}

.grid {
  display: grid;
  width: 252px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.menu .block {
  display: inline-block;
}

<div class="menu">
  <div class="image block questionmark"></div>
  <div class="image block panel"></div>
  <div class="image block wall"></div>
  <div class="image block pyramid"></div>
  <div class="image block snail"></div>
  <div class="image block toadstool"></div>
  <div class="image block coin"></div>
  <div class="image block b-left"></div>
  <div class="image block b-center"></div>
  <div class="image block b-right"></div>
  <div class="image block pipe-top-left"></div>
  <div class="image block pipe-top-right"></div>
  <div class="image block pipe-left"></div>
  <div class="image block pipe-right"></div>
  <div class="image block cloud"></div>
</div>
<div class="grid"></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53582045

复制

相似问题

问如何使用JavaScript进行图像传输
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript进行图像传输EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript进行图像传输
EN