Paper.js - 导出光栅

Paper.js - exporting of Raster

运行 paper.js 库中的以下代码

var raster = new paper.Raster({
    source: 'http://assets.paperjs.org/images/marilyn.jpg',
    position: paper.view.center
});

raster.exportSVG()

导致:

<image x="101" y="224" width="0" height="0" xlink:href="data:," fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"></image>

如您所见:

xlink:href="data:,"

而不是包含包含的图像。

用法正确吗?我应该如何导出栅格?

您在这里面临 2 个问题:

1 - 您正在尝试从尚未加载的图像中导出数据。
浏览器 HTML 请求是异步的,您必须等待图像加载后再尝试使用它。
它是通过提供回调来完成的。

2 - 然后您将遇到与 CORS.
相关的另一个问题 图片存储在与您不同的服务器上,默认情况下 security reasons.
禁止使用图片数据 所以你有 2 个解决方案:

a - 将图像存储在与脚本相同的服务器上:

// create Raster with local path to your image
var raster = new Raster('./marilyn.jpg', paper.view.center);

// use PaperJS built-in callback to wait for loading
raster.onLoad = function ()
{
    // once image is loaded
    // you can do what you want with the raster
    console.log('image loaded, SVG = ', raster.exportSVG());
};

b - 确保远程服务器允许 CORS 并在加载图像时添加 CORS attribute:

// create image
var image = new Image;

// add CORS attribute
image.crossOrigin = 'Anonymous';

// set remote source
image.src = 'http://assets.paperjs.org/images/marilyn.jpg';

// wait for image to be loaded
image.addEventListener('load', function ()
{
    // once image is loaded
    // create Raster with image element
    var raster = new Raster(image, paper.view.center);

    // now you can do what you want with the raster
    console.log('image loaded, SVG = ', raster.exportSVG());
});

编辑

实际上还有另一个更简单的 CORS 解决方案,仅使用 Raster crossOrigin 属性.

var raster = new Raster({
    crossOrigin: 'anonymous',
    source: 'http://assets.paperjs.org/images/marilyn.jpg'
});