gpt4 book ai didi

php - 如何在不使用 Canvas 的情况下将整个 div 数据转换为图像并将其保存到目录中?

转载 作者:IT王子 更新时间:2023-10-28 23:49:46 27 4
gpt4 key购买 nike

我已经在 div 中创建了我的数据(包含模板的图像、文本、标签等),现在我想将其转换为图像格式。有没有任何技术可以在不使用 canvas.anybody 的情况下将特定的 div 内容转换为图像。请帮助我!当我点击保存时,我想将整个“mydiv”内容转换为图像并将该图像保存到我的图像目录中?

<html>
<header>
</header>
<body>
<label> Template Design</label>
<div id="mydiv">
<label> Good Morning</label>
<img src="mug.png" id="img1" height="100" width="100" />
</div>
<input name="save" type="button" value="SAVE" />
</body>
</html>

最佳答案

更新(2018 年 3 月):你好 future 的人们!这个答案仍然有很多流量,我注意到我放在一起的旧 JSFiddle 坏了,所以它已经更新了。显示此技术的新 JSFiddle 在这里:https://jsfiddle.net/Sq7hg/1913 .

--

如果您不能使用 <canvas>,您可能需要研究基于 Flash 的解决方案(尽管除非这特别需要在旧版本的 IE 中工作,否则我不确定你为什么不能)。

http://flashcanvas.net/<canvas> 的仿真使用 Flash 可以让你到达你需要去的地方。文档说它支持 toDataURL()所以这可能对你有用。

您能否更深入地了解您对 <canvas> 的限制?是什么以及您已经尝试过什么?

//编辑

根据您在下方的评论,您或许可以使用 <canvas> , 在这种情况下你可以尝试使用 http://html2canvas.hertzen.com – 这是一个 JavaScript 解决方案,基本上将代码指定部分的 DOM 重写为 <canvas>然后允许您随心所欲地与之交互,包括通过 toDataURL() 将其转换为图像数据。 .

我以前没有使用过它,但是您的 JavaScript 代码看起来像这样:

html2canvas([document.getElementById('mydiv')], {
onrendered: function(canvas) {
var data = canvas.toDataURL('image/png');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
}
});

我在这里快速拼凑了一个 jsfiddle:https://jsfiddle.net/Sq7hg/1913/ (注意:根据上面的更新链接)

这个 jsfiddle 展示了如何使用 toDataURL()将 Canvas 转换为图像并将其附加到文档的方法。将生成的图像保存到服务器是一项复杂得多的任务,因为它需要 AJAX 调用或类似的方法将图像数据发送到 PHP 脚本,从而转换生成的 data:。指向实际图像的 URL,然后将其保存到您有权写入的目录中。如果这是你需要做的,而不是在这里进入,我建议从这个 Stack Overflow 问题开始:How to save an HTML5 Canvas as an image on a server?

关于php - 如何在不使用 Canvas 的情况下将整个 div 数据转换为图像并将其保存到目录中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18545034/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com