javascript - Paper.js - 导出光栅

Question

在 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:,"

而不是包含包含的图像。

使用方法正确吗？我应该如何导出栅格？

Answer 1

您在这里面临两个问题:

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

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

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'
});