скопировать текст / изображение в буфер обмена с помощью jQuery

Question

Я видел некоторые старые вопросы, похожие на мои, но мне любопытно, есть ли новые решения.

Предпосылка того, что я пытаюсь сделать , состоит в том, чтобы предоставить пользователю образец приглашения по электронной почте. Он включает в себя некоторый текст, и мы также хотели бы, чтобы там было изображение.

В настоящее время мой код настроен следующим образом ...

https://jsfiddle.net/nawfk4ue/

HTML

<div id="code-to-png" class="container">
    <div class="row-full">
        <!-- Row 1 -->
        <div class="col-md-6 fundraising-stats">
            <h4>Fundraising Stats</h4>
            <p>I have raised 66%</p>
        </div>
        <div class="col-md-3 fundraising-stats">
            <h4>My Goal:</h4>
            <p>$6,000</p>
        </div>
        <div class="col-md-3 fundraising-stats">
            <h4>Amount Raised:</h4>
            <p>$4,000</p>
        </div>
    </div>
</div>

<div class="sampleEmailText1">
    <p>Everyone! I&#8217;m so close to reaching my ! I&#8217;ve raised $XX of my $XX target &#8212; </p>
    <p>will you help me hit my goal? </p>
    <P>Donation link in my bio.</p>
    <a href="#" class="link-canvas">
        <div class="canvas"></div>
    </a>
    <p>test after canvas to see if copied</p>
    <input type="button" value="Copy to clipboard" class="btn primary-btn copyBtn1"/> 
</div>

JS / jQuery

$(document).ready(function() {       

/* Function runs to generate the image, its hidden by default */
html2canvas($("#code-to-png"), {
    onrendered: function(canvas) {
        theCanvas = canvas;
        document.body.appendChild(canvas); 
    } 
 });

  $('[class*=copyBtn]').click(function () {
    $("canvas").appendTo(".canvas");
    let classNum = this.className.replace(/\D/g, '');
    let classSelector = ".sampleEmailText" + classNum;
    const str = document.querySelector(classSelector);
    const range = document.createRange();
    range.selectNode(str);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');       

  });          
});

Теперь текст всех копий просто отлично но холст и якорная ссылка, которая его окружает, не .

Любое понимание того, возможно ли достичь?

Мне было интересно, можно ли назначить вывод холста img sr c как-нибудь возможно?

Answer 1

Решил это сам.

Взяв отправную точку, которую я изложил в своем первоначальном вопросе, я смог преобразовать холст в img и, используя jQuery, присвоить img в раздел HTML содержимого, которое я планировал скопировать.

Теперь, после нажатия кнопки «Копировать» текст И изображение все собрано и готово для вставки. В качестве дополнительного бонуса у меня есть набор изображений для открытия приглашения на загрузку, если пользователь захочет использовать его в другом месте.

HTML

<div class="sampleEmailText1">
    <p>Everyone! I&#8217;m so close to reaching my ! I&#8217;ve raised $XX of my $XX target &#8212; </p>
    <p>will you help me hit my goal? </p>
    <P>Donation link in my bio.</p>

    <!-- This bit here is where the image will reside -->
    <a href="#" class="link-canvas" download>
        <div class="canvas"></div>
    </a>

    <p>test after canvas to see if copied</p>
    <input type="button" value="Copy to clipboard" class="btn primary-btn copyBtn1"/> 
</div>

JS / jQuery

$(document).ready(function() {       

/* Function runs to generate the image, its hidden by default */
html2canvas($("#code-to-png"), {
    onrendered: function(canvas) {
        theCanvas = canvas;
        document.body.appendChild(canvas); 
    }           
});

$('[class*=copyBtn]').click(function () {
    /* Creating the canvas, turning it into an image, positioning it in the DOM, readying it for download */

    $("canvas").attr('id', 'stats-img');
    var can = document.getElementById('stats-img'); 
    var img = new Image();
    img.src = can.toDataURL();
    document.body.appendChild(img);
    var imgClass = $("body img:last-of-type").addClass('img-for-email');
    $(".img-for-email").appendTo(".canvas");
    $(".link-canvas").attr('href', img.src);
    $(".link-canvas")[0].click();

    /*The copy script */
    let classNum = this.className.replace(/\D/g, '');
    let classSelector = ".sampleEmailText" + classNum;
    const str = document.querySelector(classSelector);
    const range = document.createRange();
    range.selectNode(str);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');  
});

});

https://jsfiddle.net/r87w01f4/

В скрипке изображение не появляется для копии из-за конфликта между сценариями http и https и jsfiddle загружает внешний сценарий.

Локально это работает как брелок в Chrome / Firefox / Edge.