Question

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

但是，我尝试做的是通过以下链接裁剪位于外部位置的图片：ftp://etc/etc/etc.png

我能够将图像完美地加载到画布中，但是当我尝试执行JavaScript以实际裁剪图像时，没有任何反应。

但是，当我使用images/img.png

等来源时，这确实有效

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

Answer 1

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

来自“https://example.com”的图片已被阻止加载通过跨源资源共享政策：没有请求中存在“Access-Control-Allow-Origin”标头资源。因此，不允许原点“http://localhost”访问。

此图像裁剪器的文档说明：

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

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

Answer 2

使用具有已裁剪图像的已知x y坐标的画布裁剪图像：
在这里你可以使用你定义的路径，如imgsrc =＆＃34; images / img.png＆＃34;或者任何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 个答案: