javascript - 单击从 JS 动态加载的框后复制到剪贴板

Question

描述

我创建了一个页面，您可以在其中上传图像，然后在单击图像后返回图像特定部分的十六进制代码。

每次用户单击图像时，十六进制代码都会显示在页面顶部的框中。

现在，我正在尝试使显示十六进制代码的框可单击。单击会将其值(十六进制代码)复制到剪贴板中。

问题

该副本有效，但不适用于所有盒子。如果我点击图像上的 3 个不同部分，我会得到 3 个带有十六进制代码的框。如果我单击最后一个(红色)，则副本不起作用。仅当我单击第一个框时才会触发。

片段

$(function() {
//Script that hides the input box (label is a substitute)
(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);

//Hex picker function
var $picked = $("#picked"); // Just to preview picked colors
	var canvas = $('#canvas_picker')[0];
	var context = canvas.getContext('2d');


	$("#file_upload").change(function (e) {
	  var F = this.files[0];
	  var reader = new FileReader();
	  reader.onload = imageIsLoaded;
	  reader.readAsDataURL(F);  
	});

$('#fileLabel').bind({
	dragover: function(e){
		e.preventDefault();
		e.stopPropagation();
	},
	dragleave: function(e){
		e.preventDefault();
		e.stopPropagation();
	},
	drop: function(e){
		e.preventDefault();
		e.stopPropagation();
		var F = e.originalEvent.dataTransfer.files[0];
		var reader = new FileReader();
		reader.onload = imageIsLoaded;
		reader.readAsDataURL(F);
	}
});

	function imageIsLoaded(e) {
	  var img = new Image();
	  img.onload = function(){
		canvas.width  = this.width;
		canvas.height = this.height;
		context.drawImage(this, 0, 0);
	  };
	  img.src = e.target.result;
	}

	$('#canvas_picker').click(function(event){
	  var x = event.pageX - $(this).offset().left;
	  var y = event.pageY - $(this).offset().top;
	  var img_data = context.getImageData(x,y , 1, 1).data;
	  var R = img_data[0];
	  var G = img_data[1];
	  var B = img_data[2]; 
	  var rgb = R + ',' + G + ',' + B ;
	  var hex = rgbToHex(R,G,B);
	  $('#rgb input').val( rgb );
	  $('#hex input').val('#' + hex);
	  $picked.append("<span class='span-value-copy' contenteditable='true' style='background:#"+hex+"'>#"+hex+"</span>");

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  document.execCommand('copy');
  document.body.removeChild(textArea);
}

var copyBobBtn = document.querySelector('.span-value-copy');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard(hex);
});
    
    });

	function rgbToHex(R, G, B) {
	  return toHex(R) + toHex(G) + toHex(B);
	}

	function toHex(n) {
	  n = parseInt(n, 10);
	  if (isNaN(n))  return "00";
	  n = Math.max(0, Math.min(n, 255));
	  return "0123456789ABCDEF".charAt((n - n % 16) / 16)  + "0123456789ABCDEF".charAt(n % 16);
	}



  });

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body {
    background: hsl(184,65%,49%);
    font-family: 'Lato';
    color: #000;
    font: 15px/1.4em;
}

canvas{
  background: hsl(184,65%,49%);
 
}

#picked span{
  display:inline-block;
  width:50px;
  height:50px;
  margin:3px;
  text-align:center;
  text-shadow:1px 1px 1px #000;
  font:8px/50px Arial;
  color:#fff;
}

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}


.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}


.inputfile-2 + label {
    width: 90%;
    max-width: 220px;
    background: #fff;
    color: #333;
    border: none;
    font-family: Lato;
	text-align: center;
    font-size: 1vw;
    padding: 25px 0 25px 0;
    display: inline-block;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    border: 3px solid #333;
}



/*  COLUMN SETUP  */
.col2 {
	display: block;
	float:left;
	margin: 0;
}
.col2:first-child { margin-left: 0; }

/*  GROUPING  */
.group2:before,
.group2:after { content:""; display:table; }
.group2:after { clear:both;}
.group2 { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.66%; }
.span_1_of_3 { width: 33.33%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col2 {  margin: 0 }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}


/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.5%;
}
.span_2_of_4 {
	width: 49%;
}
.span_1_of_4 {
	width: 23.5%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}


/*  SECTIONS  */
.section {
	margin-left:5%;
	margin-right:5%;
	clear: both;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.5%;
}
.span_2_of_4 {
	width: 49%;
}
.span_1_of_4 {
	width: 23.5%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

<html lang="en" class="no-js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div id="picked"></div>
	<div class="section group">
		<div class="col span_1_of_4">
		    <input type="file" name="file_upload[]" id="file_upload" class="inputfile inputfile-2" data-multiple-caption="{count} files selected" multiple /><label id="fileLabel" for="file_upload"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg><span>CHOOSE A FILE</span></label>
		</div>
		<div class="col span_3_of_4">
		    <canvas width="600" height="300" id="canvas_picker"></canvas>
		</div>
	</div>
  </html>

用户 Harshil Patel 给出了一个无效的答案。我对代码做了一些调整并使其工作。因此，积分也分配给该用户 :P 正确的 JS 查询如下所示:

$(function() {
//Script that hides the input box (label is a substitute)
(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);

//Hex picker function
var $picked = $("#picked"); // Just to preview picked colors
    var canvas = $('#canvas_picker')[0];
    var context = canvas.getContext('2d');


    $("#file_upload").change(function (e) {
      var F = this.files[0];
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(F);  
    });

$('#fileLabel').bind({
    dragover: function(e){
        e.preventDefault();
        e.stopPropagation();
    },
    dragleave: function(e){
        e.preventDefault();
        e.stopPropagation();
    },
    drop: function(e){
        e.preventDefault();
        e.stopPropagation();
        var F = e.originalEvent.dataTransfer.files[0];
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(F);
    }
});

    function imageIsLoaded(e) {
      var img = new Image();
      img.onload = function(){
        canvas.width  = this.width;
        canvas.height = this.height;
        context.drawImage(this, 0, 0);
      };
      img.src = e.target.result;
    }

    function rgbToHex(R, G, B) {
      return toHex(R) + toHex(G) + toHex(B);
    }

    function toHex(n) {
      n = parseInt(n, 10);
      if (isNaN(n))  return "00";
      n = Math.max(0, Math.min(n, 255));
      return "0123456789ABCDEF".charAt((n - n % 16) / 16)  + "0123456789ABCDEF".charAt(n % 16);
    }

$('#canvas_picker').click(function(event){
                  var x = event.pageX - $(this).offset().left;
                  var y = event.pageY - $(this).offset().top;
                  var img_data = context.getImageData(x,y , 1, 1).data;
                  var R = img_data[0];
                  var G = img_data[1];
                  var B = img_data[2]; 
                  var rgb = R + ',' + G + ',' + B ;
                  var hex = rgbToHex(R,G,B);
                  $('#rgb input').val( rgb );
                  $('#hex input').val('#' + hex);
                  $picked.append("<span data-value='#"+hex+"' class='span-value-copy-"+hex+"' contenteditable='true' style='background:#"+hex+"'>#"+hex+"</span>");

                    function copyTextToClipboard(text) {
                      var textArea = document.createElement("textarea");
                      textArea.value = text;
                      document.body.appendChild(textArea);
                      textArea.select();
                      document.execCommand('copy');
                      document.body.removeChild(textArea);
                    }

                    var copyBobBtn = document.querySelector(".span-value-copy-"+hex);

                    copyBobBtn.addEventListener('click', function() {
                      var currentHex =  $(this).data('value');
                      copyTextToClipboard(currentHex);
                    });

                });


  });

Answer 1

$('#canvas_picker').click(function(event){
                  var x = event.pageX - $(this).offset().left;
                  var y = event.pageY - $(this).offset().top;
                  var img_data = context.getImageData(x,y , 1, 1).data;
                  var R = img_data[0];
                  var G = img_data[1];
                  var B = img_data[2]; 
                  var rgb = R + ',' + G + ',' + B ;
                  var hex = rgbToHex(R,G,B);
                  $('#rgb input').val( rgb );
                  $('#hex input').val('#' + hex);
                  $picked.append("<span data-value='#"+hex+"' class='span-value-copy' contenteditable='true' style='background:#"+hex+"'>#"+hex+"</span>");

                    function copyTextToClipboard(text) {
                      var textArea = document.createElement("textarea");
                      textArea.value = text;
                      document.body.appendChild(textArea);
                      textArea.select();
                      document.execCommand('copy');
                      document.body.removeChild(textArea);
                    }

                    var copyBobBtn = document.querySelector('.span-value-copy');

                    copyBobBtn.addEventListener('click', function() {
                      var currentHex =  $(this).data('value');
                      copyTextToClipboard(currentHex);
                    });

                });