在可点击的图像中添加IF条件以确定像素值

Question

我们有2张图片是从JSON中提取的：

1。蒙版图像[名称以 mask _ 开头]

2。汽车图片[名称以 mask _ 之外的其他名称开头]

要求：

onclick遮罩图像，我想显示文件上传对话框。工作正常。但是onclick汽车图片，我不想显示文件上传对话框。

问题：

mask_汽车图像，显示文件上传对话框。但是Car图片不应是可点击的，因为它的名称以“ $('.masked-img').css('pointer-events', 'none');之外的其他字符”开头

我尝试了var target; const imageUrl = "https://i.imgur.com/RzEm1WK.png"; let jsonData = { "layers": [{ "x": 0, "height": 612, "layers": [{ "x": 70, "src": "ax0HVTs.png", "y": 199, "height": 296, "width": 429, "name": "mask_1" }, { "name": "car", "x": 25, "src": "iEA642D.jpg", "height": 324, "width": 471, "y": 22 } ], "y": 0, "width": 612 }] }; const containerElement = $('#container'); const fileUp = $('#fileup'); let mask; $(function() { // Upload image onclick mask image containerElement.click(function(e) { var res = e.target; target = res.id; if (e.target.getContext) { // click only inside Non Transparent part var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data; if (pixel[3] === 255) { setTimeout(() => { $('#fileup').click(); }, 20); } } }); // Fetch mask images from json file - IGNORE this code function getAllSrc(layers) { let arr = []; layers.forEach(layer => { if (layer.src) { arr.push({ src: layer.src, x: layer.x, y: layer.y, height: layer.height, width: layer.width, name: layer.name }); } else if (layer.layers) { let newArr = getAllSrc(layer.layers); if (newArr.length > 0) { newArr.forEach(({ src, x, y, height, width, name }) => { arr.push({ src, x: (layer.x + x), y: (layer.y + y), height, width, name: (name) }); }); } } }); return arr; } function json(data) { var width = 0; var height = 0; let arr = getAllSrc(data.layers); let layer1 = data.layers; width = layer1[0].width; height = layer1[0].height; let counter = 0; let table = []; // container dimensions containerElement.css('width', width + "px").css('height', height + "px").addClass('temp'); //end for (let { src, x, y, name } of arr) { //Get Height and width of mask image [ edit button ] var ImagePosition = arr; //code end var imageUrl1 = imageUrl; var mask = $(".container").mask({ imageUrl: name.indexOf('mask_') !== -1 ? imageUrl1 : undefined, // Fetch Mask images maskImageUrl: 'http://i.imgur.com/' + src, // end onMaskImageCreate: function(img) { // Mask image positions img.css({ "position": "absolute", "left": x + "px", "top": y + "px" }); // end }, id: counter }); // here table.push(mask); fileup.onchange = function() { let mask2 = table[target]; const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0])); document.getElementById('fileup').value = ""; }; counter++; } return mask; } mask = json(jsonData); }); // end of function // Image code (function($) { window.JQmasks = []; $.fn.mask = function(options) { // This is the easiest way to have default options. var settings = $.extend({ // These are the defaults. maskImageUrl: undefined, imageUrl: undefined, scale: 1, id: new Date().getUTCMilliseconds().toString(), x: 0, // image start position y: 0, // image start position onMaskImageCreate: function(div) {}, }, options); // Create the image properties settings.maskImage = new Image settings.image = new Image // set the cross-origin attributes settings.maskImage.setAttribute('crossOrigin', 'anonymous'); settings.image.setAttribute('crossOrigin', 'anonymous'); settings.maskImage.onload = function() { // once the mask is loaded, load the image container.loadImage(settings.imageUrl) container.drawMask() } settings.image.onload = function() { // once the image is loaded, render to canvas container.drawImage() } var container = $(this); let prevX = 0, prevY = 0, draggable = false, img, canvas, context, image, timeout, initImage = false, startX = settings.x, startY = settings.y, div; container.drawMask = function() { if (!settings.maskImage) return true; canvas.width = settings.maskImage.width; canvas.height = settings.maskImage.height; context.save(); context.beginPath(); context.globalCompositeOperation = "source-over"; // draw the masked image after scaling if (settings.maskImage) context.drawImage(settings.maskImage, 0, 0, settings.maskImage.width, settings.maskImage.height); context.restore() }; container.drawImage = function() { const img = settings.image settings.x = (canvas.width - (img.width * settings.scale)) / 2 settings.y = (canvas.height - (img.height * settings.scale)) / 2 context.globalCompositeOperation = 'source-atop'; if (img) context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale); context.restore() initImage = false; } // change the draggable image container.loadImage = function(imageUrl) { if (!imageUrl) return true; settings.y = startY; settings.x = startX; prevX = prevY = 0; initImage = true; settings.image.src = imageUrl; // CHANGED // sirpepole Add this return settings.id; }; container.loadMaskImage = function(imageUrl, from) { canvas = document.createElement("canvas"); context = canvas.getContext('2d'); canvas.setAttribute("draggable", "true"); canvas.setAttribute("id", settings.id); // settings.maskImageUrl = imageUrl; settings.maskImage.src = imageUrl // CHANGED div = $("<div/>", { "class": "masked-img" }).append(canvas); // div.find("canvas").on('touchstart mousedown', function(event) div.find("canvas").on('dragstart', function(event) { if (event.handled === false) return; event.handled = true; container.onDragStart(event); }); div.find("canvas").on('touchend mouseup', function(event) { if (event.handled === false) return; event.handled = true; container.selected(event); }); div.find("canvas").bind("dragover", container.onDragOver); container.append(div); if (settings.onMaskImageCreate) settings.onMaskImageCreate(div); // container.loadImage(settings.imageUrl); // Moved this to the settings.maskImage.onload }; if (settings.maskImageUrl) { container.loadMaskImage(settings.maskImageUrl); } JQmasks.push({ item: container, id: settings.id }) // Edit image div.addClass('masked-img' + settings.id); div.attr('data-id', settings.id); // ends return container; }; }(jQuery));，但并没有帮助我。

以下是代码段：

.container {
  background: silver;
  position: relative;
}

.container img {
  position: absolute;
  top: 0;
  bottom: 250px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 999;
}

.masked-img {
  overflow: hidden;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fileup" name="fileup" type="file" style="display:none" />
<div id="container" class="container"></div>

while_loop

这里是Codepen，Fiddle和Full code in pastebin

我们实现了类似的功能，即仅在蒙版图像上显示“ +”图标。...

Answer 1

您正在获取一个像素的数据，它返回一个4字节长的Uint8ClampedArray。

var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;

现在这4个字节代表像素的R，G，B和A值。 pixels[3]代表Alpha值，对于大多数图像来说，它很容易为255。

如果要确保只有白色像素可以触发操作，则应检查255的R，G和B。

if (pixel[0] === 255 && pixel[1] === 255 && pixel[2] === 255) {
     setTimeout(() => {
         $('#fileup').click();
     }, 20);
}

提示：

您的程序中存在设计缺陷。也就是说，如果您的图像（汽车或其他物体）具有白色像素，并且用户单击其中之一，则将采取相应措施。您应该检查遮罩区域是否有点击，然后寻找白色像素。

Answer 2

通过映射，您可以提取for...Of个图像，从而为您的mask循环提供了帮助 并使用includes函数的帮助进行搜索，然后添加pointer-events CSS属性。

ImagePosition.map(function (cur, index) {
    var available = cur.name.includes('mask_');

    if (!available) {
        $('.masked-img' + index).css('pointer-events', 'none');
    }
});