Question

在html中有效：

<img id="invisImg" src="https://drive.google.com/uc?export=view&id=1oDTwDBuAM-IIuJi3iDE5BJlEDHolD68w">

但是如果我尝试将其绘制在画布上，则该图片不会显示。如果我下载图片并具有本地链接，则可以正常工作，但是由于画布错误而无法将画布保存到文件中。

如果我尝试：

$v2Img.attr("src","https://drive.google.com/uc?export=view&id=1oDTwDBuAM-IIuJi3iDE5BJlEDHolD68w");

在我的脚本文件中，图片完全无法加载。

我也尝试过将照片托管在保管箱上，在那里同样存在问题。

有什么建议吗？

编辑：这是我代码的核心 HTML：

    <div id="canvas-container">
        <h2>Grafik</h2>
        <canvas id="canvas-1"></canvas>
        <a id="saveCanvas" download="canvas.jpg">Spara canvas</a>
    </div>
    <img id="invisImg" src="v2.png"> 
    <!-- Alternatives:
        https://drive.google.com/uc?export=view&id=1oDTwDBuAM-IIuJi3iDE5BJlEDHolD68w
        v2.png
    -->

    <script src="graphics.js"></script>
</body>

和graphics.js：

$(document).ready(function(){
var $canvas1 = $("#canvas-1");
var canvas1 = $canvas1[0];
var ctx = canvas1.getContext("2d");

ctx.drawImage(vpic,0,0,300,150); 

var dt = canvas1.toDataURL("image/jpeg");
$("#saveCanvas").attr("href",dt);

});

var $vpic = $("#invisImg");
var vpic = $vpic[0];

如果图像存储在其他服务器上，则不会在画布上显示；如果图像存储在本地，则不能保存画布。我还尝试将其上传到我的webhotel，以查看是否仅是本地问题，但这没关系，您可以看到它here with some extra fluff。

Answer 1

您可以通过使用Javascript创建图像来做类似的事情：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var img = new Image();
img.src = "https://drive.google.com/uc?export=view&id=1oDTwDBuAM-IIuJi3iDE5BJlEDHolD68w";
img.onload = function() {
 ctx.drawImage(img, 0, 0, 240, 297);
};

 <canvas id="canvas"></canvas>

Answer 2

有一个CORS安全策略，不能随意处理“污染”像素（来自不同来源）。这旨在保护用户免受窃听用户像素数据的攻击。</ p>

启动浏览器时必须allow cross-origin才能绕过此安全边界。

有关canvas and pixel data的更多信息。

在javascript中加载外部图片

2 个答案: