Question

用户转发图像并通过该图像上的json接收响应，其中一个答案如下：

"faceRectangle": {
  "top": 187,
  "left": 458,
  "width": 186,
  "height": 186
},

最大的问题是：

通过上面显示的信息，我如何在每个中插入一个正方形顶部和左边有javascript吗？

我的代码[CSS]

.teste {
  border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 5px solid #efff0d;
}

我的代码[HTML]

<div class="col s12 m12 l6 xl6 center-align">
  <div class="container-image-uploaded">
    <div id="teste"></div>
    <img id="sourceImagem" class="responsive-img sourceImagem">
  </div>
</div>

我的代码[JAVASCRIPT]

document.getElementById('teste').innerHTML.style.width +=  obj[o].faceRectangle.width + "px";
document.getElementById('teste').innerHTML.style.height += obj[o].faceRectangle.height + "px";
document.getElementById('teste').innerHTML.style.top += obj[o].faceRectangle.top + "px";
document.getElementById('teste').innerHTML.style.left += obj[o].faceRectangle.left + "px";

Answer 1

我更喜欢使用appendChild因为您可以在内存中创建新的dom元素并使用此方法添加它。

.innerHtml也在运作，但之后您更多地使用字符串。

请查看下面的演示或fiddle。

在这个例子中并不真正需要Vue.js，但它更容易使用基于组件的工作。如果您不了解Vue，那么只需查看由mousedown事件处理程序add调用的markImage方法。

正如O＆＃K; Kane在评论中提到的，你需要小心你的字符串连接。我在演示中使用back-tick syntax / template string作为字符串，因此您可以轻松地将值插入字符串中。 e.g。

    var style = `
        left: ${pos.x}px; 
        top: ${pos.y}px;`

单引号也可以这样，但写起来更难。 e.g。

var style = 'left: ' + pos.x + 'px; top: ' + pos.y + 'px;'

注意： Babel需要使用模板字符串。没有它，浏览器支持有限see here

在演示中，我创建了两个变体：

SVG矩形（使其工作所需的css较少）
DIV喜欢你的代码（需要更多的CSS）

我认为这两种变体都很有效。我可能会使用SVG，因为它更容易创建，以及稍后导出也没问题。例如如果你想把它保存为新图像。

对css的说明

需要以下zero-space width字符才能使div对指定的大小做出反应。可能设置min-width也可以。

.image-marker-png:after {
    content: '\200b';
}

＆＃13;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

const svgOutput = {
	mounted () {
  	this.svg = this.$el.querySelector('svg')
    
    let img = document.createElementNS('http://www.w3.org/2000/svg', 'image')
    img.setAttribute('x', 0)
    img.setAttribute('y', 0)
    img.setAttribute('width', '100%')
    img.setAttribute('height', '100%')
    img.setAttribute('href', 'https://unsplash.it/300')
    console.log(img)
    this.svg.appendChild(img)
    // setInterval(this.add, 50)
    
    this.image = this.svg.querySelector('image')
    this.image.addEventListener('mousedown', this.markImage)
  },
  beforeDestroy() {
  	// clean listeners
  	this.image.removeEventListener('mousedown', this.markImage)
  },
	template: `
  <div>
  	<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg"></svg>
    <button @click="add">add random</button>
    <button @click="add($event, {x: 20, y: 40}, {width: 50, height: 100})">
    add "x20,y40,w50,h100"
    </button>
   </div>
  `,
  methods: {
  	add (evt, pos, dimension, color) {
    	let rectangle = document.createElementNS("http://www.w3.org/2000/svg", 'rect')
      let containerSize = this.svg.getBoundingClientRect();
      dimension = dimension || {}
      pos = pos || {}
      
      let sizeX = dimension.width || 50;
      let sizeY = dimension.height || 50;
      let x =  pos.x || (Math.random()*(containerSize.width) - sizeX)
      let y =  pos.y || (Math.random()*(containerSize.height) - sizeY)
      
      // some limiting
      if (x > containerSize.width) {
      	x = containerSize.width - sizeX + 1
      }
      if (x < 0) {
      	x = 1
      }
      if (y > containerSize.height) {
      	y = containerSize.height - sizeY + 1
      }
      if (y < 0) {
      	y = 1
      }
      
      rectangle.setAttribute('class', 'image-marker')
      rectangle.setAttribute('width', sizeX)
      rectangle.setAttribute('height', sizeY)
      rectangle.setAttribute('x', x)
      rectangle.setAttribute('y', y)
      rectangle.setAttribute('fill', color || getRandomColor())
      rectangle.setAttribute('stroke', 'black')
    	this.svg.appendChild(rectangle)
    },
    markImage (evt) {
    	console.log('clicked svg', evt)
      this.add(evt, {x: evt.offsetX, y: evt.offsetY}, {width: 20, height: 20})
    }
  }
}

const imgOutput = {
  beforeDestroy() {
  	// clean listeners
  	this.container.removeEventListener('mousedown', this.markImage)
  },
  mounted() {
  	this.container = this.$el
    this.container.addEventListener('mousedown', this.markImage)
  },
  template: `
  	<div class="image-container">
    	<img src="https://unsplash.it/300"/>
    </div>
  `,
  methods: {
  	add (evt, pos, dimension, color) {
    	let marker = document.createElement('div')
      marker.setAttribute('class', 'image-marker-png')
      marker.setAttribute('style', `
      	left: ${pos.x}px; 
        top: ${pos.y}px; 
        width: ${dimension.width}px; 
        height: ${dimension.height}px; 
        background-color: ${color || getRandomColor()}`)
      console.log('add marker', marker)
    	this.container.appendChild(marker)
    },
    markImage (evt) {
    	console.log('clicked image', evt)
      this.add(evt, {x: evt.offsetX, y: evt.offsetY}, {width: 20, height: 20})
    }
  }
}

console.log(imgOutput)

new Vue({
	components: {
  	svgOutput,
    imgOutput
  },
	el: '#app'
})

＆＃13;

.image-marker:hover {
   stroke-width: 1px;
   stroke: yellow;
}
.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.image-marker-png {
  position: absolute;
  z-index: +1;
}
.image-marker-png:hover{
  border: 1px solid yellow;
}
.image-marker-png:after {
  content: '\200b';
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <svg-output></svg-output>
  <img-output></img-output>
</div>

＆＃13;

如何将一个人的无面正方形插入图像？

1 个答案: