图像裁剪器不适用于外部图像

Posted 2023-02-25

【中文标题】图像裁剪器不适用于外部图像

【英文标题】：Image cropper not working with external images

【发布时间】：2015-01-28 09:36:38

【问题描述】：

我正在使用this 图像裁剪器，只要我加载的图像实际上位于站点地图结构本身中，它就可以正常工作。

但是，我正在尝试通过如下链接裁剪位于外部位置的图像：ftp://etc/etc/etc.png

我能够完美地将图像加载到画布中，但是当我尝试执行 javascript 以实际裁剪图像时，什么都没有发生。

但是，当我使用 images/img.png 等来源时，这确实有效

有人知道如何解决这个问题吗？

【问题讨论】：

你能显示你的代码吗

我的 html pastebin.com/UvkiN43r 我的 javascript 调用函数 pastebin.com/zkGpM41d

【参考方案1】：

使用已知 x y 坐标的画布裁剪图像，从您要裁剪图像的位置： 在这里，您可以使用您定义的路径，例如 imgsrc="images/img.png" 或图像的任何base64数据作为base64。

function generateImageThumbnailArrayFromCLientInfo(imgsrc,x,y ClientInfoArray) 
        var image = new Image();
        image.src = imgsrc;
        var imagePieces = [];


                var canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext('2d');

                context.drawImage(image, x, y, image.width, image.height, 0, 0, canvas.width, canvas.height);


                imagePieces=canvas.toDataURL();

        return imagePieces;
    

【参考方案2】：

如果您查看浏览器控制台，您可能会发现您收到类似于以下内容的跨域资源共享策略错误：

来自“https://example.com”的图片已被阻止加载 按跨域资源共享策略：否 请求中存在“Access-Control-Allow-Origin”标头 资源。 Origin 'http://localhost' 因此不允许访问。

此图像裁剪器的文档指出：

如果您尝试在跨域图像上启动裁剪器，请确保您的浏览器支持 HTML5 CORS 设置属性，并且 您的图像服务器支持 Access-Control-Allow-Origin 选项。

假设您拥有提供图像的网络服务器，您可能需要查看enabling CORS。