Paste Into image within image with javascript?-CodePudding

The

Notice the blue border: that is my predefined region. Everything outside that region will remain the same. Everything inside that region will be covered by a portion of IMAGE #2.

IMAGE #2:

A cropped version of IMAGE #2 will appear inside the predefined (blue-border) region of IMAGE #1, and the user will be able to drag it around as desired until the position is satisfactory.

IMAGE #3 (the final composite):

Finally, I need the user to be able to click a button that (calling some js) captures the composite image and enables it to be saved, or transmitted via ajax to my server. The final image needs to be high-rez without any compression or degradation: just as high-rez as the original images on the page.

I'm OK using a 3rd-party library. I'm also OK doing this from scratch. But I need some guidance as to the simplest and most efficient way to do it. I'm very comfortable with HTML, CSS, javascript, and jquery. Any pointers to a working example of something similar, or a library that does it, is all I'm looking for. Thanks in advance.

CodePudding user response：

Here's a small standalone example of how to do something like this with the Canvas 2D Context API.

In your example, your user would probably not choose the base image themselves but you'd get it from your server or whatnot.

/** * Read an `Image` out of an user-selected file. */ function getImageFromInput(input) { return new Promise((resolve, reject) => { const fr = new FileReader(); fr.onload = () => { const img = new Image(); img.onload = () => resolve(img); img.src = fr.result; }; fr.onerror = reject; fr.readAsDataURL(input.files[0]); }); } async function render() { let baseImg; let overlayImg; try { baseImg = await getImageFromInput(document.getElementById("base")); overlayImg = await getImageFromInput(document.getElementById("overlay")); } catch (e) { return; } const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = baseImg.width; canvas.height = baseImg.height; ctx.drawImage(baseImg, 0, 0, canvas.width, canvas.height); // These would be hard-coded according to your base image. const x0 = canvas.width * 0.2; const y0 = canvas.height * 0.2; const x1 = canvas.width * 0.8; const y1 = canvas.height * 0.8; ctx.drawImage(overlayImg, 0, 0, overlayImg.width, overlayImg.height, x0, y0, x1 - x0, y1 - y0); }

Choose base image: <input type="file" id="base" accept="image/*" onchange="render()"> <br> Choose overlay image: <input type="file" id="overlay" accept="image/*" onchange="render()"> <br> <canvas width="800" height="600" id="canvas"></canvas>

CodePudding user response：

As you mentioned in your comment, you could use draggable functionality from jQuery UI to enable positioning for the second image. You could also use html2canvas to capture your montage.

Since I got a cross-origin issue with the built-in snippet on Stack Overflow, please take a look at this JSFiddle. I put the code below too:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-ui.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script> <p>Copy a first image and paste it here (Ctrl-V):</p> <div id="frame"></div> <div id="container"> <div></div> <div></div> </div>

#frame, #container div, #container img, button { position: absolute; } #frame { width: 300px; height: 200px; border: solid 5px #22bbf6; background-color: transparent; z-index: 3; pointer-events: none; } #container div:first-child { z-index: 1; } #container div:last-child { width: 310px; height: 210px; overflow: hidden; z-index: 2; pointer-events: none; } #container img { z-index: -1; pointer-events: auto; } button { top: 270px; cursor: pointer; }

$(document).ready(() => { let counter = 0, $body = $('body'), $p = $('p'), $container = $('#container'), frame = document.getElementById('frame'); document.onpaste = e => { let fileReader = new FileReader(), clipItems = e.clipboardData.items; fileReader.onload = e => { counter ; let img = document.createElement('img'); if (counter === 1 || counter === 2) { img.src = e.target.result; img.height = frame.offsetHeight; } if (counter === 1) { $p.text('Copy a second image and paste it here (Ctrl-V):'); $container.children().first().append(img); } else if (counter === 2) { $p.text('You can adjust the position of your second image and capture your montage:'); $container.children().last().append(img); $(img).draggable(); $(img).css('cursor', 'grab'); $body.append('<button type="button">Capture</button>'); } }; fileReader.readAsDataURL(clipItems[clipItems.length - 1].getAsFile()); } $body.on('click', 'button', () => { $container.css({ width: '310px', height: '210px' }); $(frame).css('border', 'none'); html2canvas($container[0], { scale: 2 }).then(canvas => { $p.text('Result:'); $('#container, button').hide(); $body.append(canvas); }); }); });

I used a bit of Vanilla JS in there, especially when I found it more convenient than jQuery.

Notice that you can modify image quality through the scale option (see html2canvas options).