gpt4 book ai didi

html - 如何将 iframe 转换为 Canvas ?

转载 作者:行者123 更新时间:2023-12-02 00:48:30 26 4
gpt4 key购买 nike

我正在尝试将所有内容作为图像保存到另一个页面。

我已经探索了执行此操作的方法,因此我认为我需要先将该页面转换为 Canvas 。

因此,我尝试使用我想将其保存到 img 的链接首先成为我当前页面中的 iframe,然后将 iframe 转换为 Canvas ,但它不起作用。

$(document).ready(function(){

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});

$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});

});
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="html-content-holder" width="100%" height="100%" src="http://api.marketanyware.com/chartv2/engine/index.html?{bodyColor:%27#000000',api:{params:[{Stock:'SET',Period:'2hour',ChartList:{OHLC:true,EODHLine:true,EMA: [5, 10, 25, 50, 75, 200],RSI: [7],MACDBar:false,MACD: [{ v12: 12, v26: 26, vref: 9,type:11}/*, { v1: 12, v2: 26, vref: 9}*/],Volume:true,VolumeColor:false}}]}}"></iframe>

<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br/>
<h3>Preview :</h3>
<div id="previewImage">

最佳答案

您无法访问跨源 iframe 的内容。

html2canvas 也不能,它需要解析 DOM 结构才能在 Canvas 上绘制它。

对于同源 iframe,

html2canvas 不会自己获取框架的内容,因此您必须将其 contentDocument.documentElement 作为参数传递,否则它只会呈现一个空框。

frame.onload =()=>{
html2canvas(frame.contentDocument).then((canvas)=>{
document.body.appendChild(canvas);
});
};

Link for fiddle因为 stacknippets 框架是沙盒化的,我们不能用它做任何事情......

关于html - 如何将 iframe 转换为 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41907019/

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