Javascript Croppie.从客户端url裁剪图像，然后保存

Javascript Croppie. Crop image from url on the client and then save

本文关键字：图像 然后 保存 裁剪 url Croppie 客户端 Javascript      更新时间：2023-09-26

我正在使用库Croppie。当它接收到指向保存在服务器上的图像的url时，它可以正常工作。但是，如果它从网络上的某些图像接收到url，则不起作用:

: 

$('.demo').croppie({
    url: 'demo/demo-1.jpg',
});

行不通:

$('.demo').croppie({
    url: 'http://magic.wizards.com/sites/mtg/files/image_legacy_migration/mtg/images/daily/wallpapers/Wallpaper_JuganTheRisingStar_1280x960.jpg
});

我只是想知道是否有可能的解决办法。还是我必须将图像保存到服务器上，然后再裁剪?

我在这里创建了一个JSFiddle

https://jsfiddle.net/alejoss/borcp2kq/

这个问题在JSFiddle上很清楚。它现在不起作用。

Croppie使用canvas.drawImage(...)来操纵图像，因此当它来自不同的域时，由于CORS策略，它不起作用。我发现的解决方法是将图像从外部源编码为服务器中的base64，并将其传递给Croppie。

在服务器(PHP): 

$base64Image = base64_encode(file_get_contents('http://external_resource_link'))
在Javascript: 

var myExternalImage = "data:image/png;base64,<?php echo($base64Image); ?>";
var imageCropper = $('#upload-container').croppie({
     viewport: {
        width: 250,
        height: 150,
        type: 'square'
     },
     boundary: {
        width: 300,
        height: 200
     },
     url: myExternalImage
});
相关文章：