Question

我正在创建一个程序，用户将上传图像，程序将在画布上方显示一个div并已解决此问题。但我的问题是当我试图保存/下载图像时，它只会保存画布。

<div id="memePlaceHolder" style="height: 700px; width:700px;background:#BBB;">
    <canvas id="c" width="0" height="0">
    </canvas>        
    <div id="myTestDiv" name="myTestDiv">
       <h1>#Test Hashtag</h1>
       <br/>
       <h2>My Test Display</h2>
    </div>
</div>

我使用此代码保存/下载画布。

e.downloadLink.href = e.c.toDataURL();

是否有方法将图像与上面显示的div一起保存？

Answer 1

您可以使用名为html2canvas的JavaScript库实现此目的。

<强>ᴅᴇᴍᴏ

＆＃13;

let wrapper = document.querySelector('#wrapper');
let title = document.querySelector('#title');
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

let img = new Image();
img.onload = function () {
    ctx.drawImage(this, 0, 0, 150, 150);
}
img.crossOrigin = 'anonymous';
img.src = 'https://i.imgur.com/Q6aZlme.jpg';

function save() {
    html2canvas(wrapper, {
        onrendered: function (canvas) {
            let a = document.createElement('a');
            a.href = canvas.toDataURL();
            a.download = 'myImage.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
    });
}

＆＃13;

#title {font: 16px Verdana;color: #07C}#canvas {border: 1px solid #ccc}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="wrapper">
    <div id="title">DreiDreiDrei</div>
    <canvas id="canvas" width="150" height="150"></canvas>
</div>
<button onclick="save()">Save as Image</button>

＆＃13;

要了解有关该库的更多信息，请参阅官方documentation。

Answer 2

不，你不能用canvas元素

保存div

将画布与Div一起保存

2 个答案: