带有绝对定位图像的响应页面

Question

我们正在使用JSON获取图像。 在json中，还提到了图像的X [左]和Y [顶部]位置，我需要使用相同的位置。

所以我用绝对位置。 如果我使用相对位置，则图像将不会显示在正确的位置，因此在这种情况下是否可以使页面响应？

如果是这样，我需要采取什么措施使其具有响应能力？

onMaskImageCreate: function(img) {
                    // Mask image positions
                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });

片段 ：

 var target; const imageUrl = "https://i.imgur.com/RzEm1WK.png"; let jsonData = { "layers": [{ "x": 0, "height": 612, "layers": [{ "x": 160, "src": "ax0HVTs.png", "y": 291, "height": 296, "width": 429, "name": "mask_1" }, { "x": 25, "src": "hEM2kEP.png", "height": 324, "width": 471, "y": 22, "name": "mask_2" }], "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 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 = []; containerElement.css('width', width + "px").css('height', height + "px").addClass('temp'); for (let { src, x, y, name } of arr) { var imageUrl1 = imageUrl; var mask = $(".container").mask({ imageUrl: name.indexOf('mask_') !== -1 ? imageUrl1 : undefined, // Mask images maskImageUrl: 'https://i.imgur.com/' + src, // end onMaskImageCreate: function(img) { // Mask image positions img.css({ "position": "absolute", "left": x + "px", "top": y + "px" }); // end }, id: counter }); 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. const 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) {}, rotate: 0, }, 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, true) 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, scale = settings.scale, div; container.getImagePosition = function() { return { x: settings.x, y: settings.y, scale: settings.scale }; }; 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 = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x; settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y; context.globalCompositeOperation = 'source-atop'; context.save(); context.translate(settings.x + img.width / 2, settings.y + img.height / 2); context.rotate(settings.rotate); context.scale(settings.scale, settings.scale); context.translate(-(settings.x + img.width / 2), -(settings.y + img.height / 2)); let width = img.width, height = img.height; if (img) context.drawImage(img, settings.x, settings.y, width, height); context.restore(); initImage = false; } container.loadImage = function(imageUrl, isMask) { if (!imageUrl) return true; settings.y = startY; settings.x = startX; settings.scale = 1; settings.rotate = 0; prevX = prevY = 0; initImage = true; settings.image.src = imageUrl; // CHANGED if (!isMask) container.data('image_set' + settings.id, true) return settings.id; }; container.loadMaskImage = function(imageUrl, from) { console.log('loading mask image from', 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('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); }; 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> 

这里是小提琴 ， Codepen ， 引擎收录

Answer 1

尝试动态更改画布宽度，然后可以使其响应