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