Question

使用相当基本的代码。

HTML

<img id="img" style="max-width: 100%; max-height: 650px; " />

的Javascript

var image = document.getElementById("img");

image.crossOrigin = "anonymous";
image.addEventListener('load', function (event) {
    alert("here");         

    orgImg.width = this.naturalWidth;
    orgImg.height = this.naturalHeight;
    orgImg.getContext("2d").drawImage(this, 0, 0);           

    //etc
    orgImg.getContext("2d").getImageData(0, 0, orgImg.width, orgImg.height) //security error
}, {once: true});
image.src = '<?= $this->imgSrc ?>';

imgSrc是一个不在同一个域中的URL。该站点位于localhost上，该映像位于另一个站点上，并且是https。

如果删除image.crossOrigin = "anonymous";，图像会加载，但是我收到安全错误。如果我放回交叉原点，图像根本不加载，则负载处理程序永远不会被触发。

将图像移动到服务于该页面的服务器是不现实的选择，因为图像会被卡在那里，直到另一个服务或进程将其清除。

我错过了什么？

由于

Answer 1

我能够使用一些脊椎卷曲代码解决这个问题。

在我的php中，我做到了。

        $imgSrc= $this->_request->getParam('imgSrc', ''); //URL of image
        if (!empty($imgSrc)) {
            $imgSrc = file_get_contents($imgSrc); //naughty variable reuse
            $imgSrc = 'data:image/x-icon;base64,' . base64_encode($imgSrc);
        }

这样就不会使用原始图像，而是发送史诗字符串，这不会导致安全问题。然后为了减轻记忆，我在加载事件结束时添加了image.src="";。

var image = document.getElementById("img");

image.addEventListener('load', function (event) {
    alert("here");         

    orgImg.width = this.naturalWidth;
    orgImg.height = this.naturalHeight;
    orgImg.getContext("2d").drawImage(this, 0, 0);           
    image.src=""; //clear the massive string from memory

    //etc
    orgImg.getContext("2d").getImageData(0, 0, orgImg.width, orgImg.height) //security error
}, {once: true});
image.src = '<?= $this->imgSrc ?>';

移动设备永远不会访问此页面，因此暂时使用疯狂的RAM是可以的。但如果有人有一个更好的解决方案，那就更好了。

由于

如何修复getimagedata操作是不安全的

1 个答案: