gpt4 book ai didi

javascript - 将 Canvas 保存为本地计算机上的图像

转载 作者:行者123 更新时间:2023-11-28 18:13:40 27 4
gpt4 key购买 nike

我试图在我的本地机器上保存 Canvas ,但没有任何效果。请检查以下代码。

    <!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}

</style>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>

<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<img id="canvasImg" alt="Right click to save me!">
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');


var imageObj = new Image();

imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);

// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

var imageData = canvas.toDataURL();


</script>
</body>
</html>

在此示例代码中,我正在抽取一些图像和云,并希望将其另存为图像文件???

最佳答案

正如 Sacho 提到的,“污染 Canvas 会阻止它被保存”。 This is a security feature停止捕获来自第三方网站的数据。

一种解决方法是提供来自您自己网站的所有静态图像。这可以通过让您的服务器根据请求从第三方站点下载图像并返回数据流(就像它在您自己的域中一样)来完成。然后浏览器就不会提示污染,因为它实际上来自您的服务器。

我不知道你的服务器端技术是什么,所以不能建议具体的实现,但你基本上可以生成如下请求:

/imagerequest.php?url=http%3A%2F%2Fwww.html5canvastutorials.com%2Fdemos%2Fassets%2Fdarth-vader.jpg

源 URL 作为参数提供,imagerequest.php(或 aspx)等是您的服务器脚本。

关于javascript - 将 Canvas 保存为本地计算机上的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18225859/

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