在画布上渲染 svg 图像
Rendering svg images on a canvas
>我正在尝试在画布上渲染SVG图像,一次绘制一个图像以填充给定的行,以下是相同的代码片段:
function createSVGUrl(svg) {
var svgBlob = new Blob([svg], {type: 'image/svg+xml;charset=utf-8'});
return DOMURL.createObjectURL(svgBlob);
};
/**
* Renders svg tile on the given context.
* @param {CanvasRenderingContext2D} ctx
* @param {SVGElement} svg The svg tile.
* @param {{x: number, y:number}} pos The position to draw the svg tile on.
* @throws Error
*/
function renderSVGTile(ctx, svg, pos) {
var img = new Image();
var url = createSVGUrl(svg);
img.onload = function() {
try {
ctx.drawImage(img, pos.x, pos.y);
ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
DOMURL.revokeObjectURL(url);
} catch (e) {
throw new Error('Could not render image' + e);
}
};
img.src = url;
};
问题是我可以看到我不想要的部分填充行,有没有办法一次填充整行?
是的。首先将整排磁贴绘制到屏幕外的画布上。完成后,您可以将屏幕外画布绘制到主画布上。
像这样:
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas .width = <whatever>;
offscreenCanvas .height = <whatever>;
var offscreenContext = offscreenCanvas.getContext('2d');
// Draw all your tiles
renderSVGTile(offscreenContext, svg, pos);
//... loop through all tiles etc
// When finished...
mainCanvasContext.drawImage(offscreenCanvas, 0, 0);
演示:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById("source");
var offscreenCanvas = document.createElement("canvas");
offscreenCanvas.width = 300;
offscreenCanvas.height = 150;
var offscreenContext = offscreenCanvas.getContext("2d");
offscreenContext.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
offscreenContext.drawImage(image, 33, 71, 104, 124, 108, 20, 87, 104);
ctx.drawImage(offscreenCanvas, 0, 0);
<canvas id="canvas"></canvas>
<div style="display:none;">
<img id="source" src="http://placekitten.com/300/227"
width="300" height="227">
</div>
这就是我的做法,尽管我不确定它是否适合您的目的,因为我在渲染时文档中有图像,它只是隐藏了。
var ctx = document.getElementById("canvasID").getContext("2d");
ctx.drawImage(document.getElementById("imageID"), x,y,w,h);
下面的解决方案对我来说工作正常:
/**
* @param {CanvasRenderingContext2D} ctx
* @param {!Array<!SVGTile>} tiles
*/
function drawTiles(ctx, tiles) {
var canvas = document.createElement('canvas');
var width = tiles.length * TILE_WIDTH;
var height = TILE_HEIGHT;
var y = tiles[0].y;
canvas.width = tiles.length * TILE_WIDTH;
canvas.height = TILE_HEIGHT;
var context = canvas.getContext("2d");
tiles.forEach(function(tile, index) {
renderTile(context, tile, function() {
if (tiles.length === index + 1) {
ctx.drawImage(canvas, 0, y);
}
});
});
// TODO: Below code is for testing purpose.
var temp = document.createElement('div');
temp.appendChild(canvas);
document.body.appendChild(temp);
};
/**
* Renders svg tile on the given context.
* @param {CanvasRenderingContext2D} ctx
* @param {!Tile} tile The tile to render.
* @param {function()} callback To be called after image is loaded.
* @throws Error
*/
function renderTile(ctx, tile, callback) {
var img = new Image();
img.onload = function() {
try {
ctx.drawImage(this, tile.x, 0, tile.width, tile.height);
ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
DOMURL.revokeObjectURL(tile.svgURL);
callback();
} catch (e) {
throw new Error('Could not render image' + e);
}
};
img.src = tile.svgURL;
};
相关文章:
- 在轴上旋转SVG图像
- 如何在悬停时更改SVG图像的颜色
- Javascript:如何将SVG图像放入数组中
- 将 src 内容动态加载到 SVG 图像
- 根据窗口大小调整 HTML 中 SVG 图像的大小
- 在web浏览器中保存操作过的SVG图像
- Firefox使用drawImage将SVG图像渲染到HTML5画布时出错
- 拉伸和旋转SVG图像的特定部分
- 缩放SVG图像以适应父对象,并在不同的实例中更改仪表颜色
- AngularJS:如何将ng-click绑定到使用嵌入或对象元素插入的SVG图像
- 更改 xlink:当图像在 D3js 中未退出时 svg 图像的 href 链接
- 如何检查 svg 图像的大小
- 将 SVG 图像绘制到 CanvasRenderingContext2D 中
- 是否可以使用 JavaScript 获取 SVG 图像的 XML
- 如何在不看到“闪烁”的情况下更新 SVG 图像
- 如何延迟加载 css 中给出的 svg 图像
- svg 图像被添加到 DOM 中,但除非在 Firebug 中触摸,否则不可见
- 如何将 svg 图像附加到另一个 svg 图像的矩形元素
- 屏幕闪烁与 mxGraph 和 svg 图像
- D3.js SVG 图像拖动有效,但引发许多类型错误