gpt4 book ai didi

jquery - html2canvas 不渲染 CDN 图片

转载 作者:行者123 更新时间:2023-12-05 01:47:03 25 4
gpt4 key购买 nike

我正在尝试使用 html2canvas 获取屏幕截图。它对文本工作正常,但不渲染 CDN 图像,如果我在服务器中托管图像,它工作正常,但如果尝试从 CDN 链接加载图像,则这些图像不会渲染。

我的代码是:

索引.php

<div id="target">
<img id="editor_Img_1" src="http://d2j259rizy5u5h.cloudfront.net/outputvideos/thumbs/email_44_2015_03_02_54f462457526c-00001.png" alt="event-video" style="height: 200px; width: 320px;">
</div>

function capture() {
$('#target').html2canvas({
onrendered: function (canvas) {
var img = canvas.toDataURL();
console.log(img);
$('<img>',{src:img}).appendTo($('img'));
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
document.getElementById("myForm").submit();
}
});
}

保存.php

<?php
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

echo $filteredData;

//Save the image
file_put_contents('img.png', $unencodedData);
?>
<h2>Save the image and show to user</h2>
<table>
<tr>
<td>
<a href="img.png" target="blank">
Click Here to See The Image Saved to Server</a>
</td>
<td align="right">
<a href="index.php">
Click Here to Go Back</a>
</td>
</tr>
<tr>
<td colspan="2">
<br />
<br />
<span>
Here is Client-sided image:
</span>
<br />
<?php
//Show the image
echo '<img src="'.$_POST['img_val'].'" />';
?>
</td>
</tr>
</table>

最佳答案

您可以通过在 html2canvas 函数中传递一个选项来实现。

html2canvas(document.body,
{
useCORS: true, //By passing this option in function Cross origin images will be rendered properly in the downloaded version of the PDF
onrendered: function (canvas) {
//your functions here
}
});

关于jquery - html2canvas 不渲染 CDN 图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31509227/

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