一个新手因为知识面太窄导致读不懂文档。
在MDN上有关canvas有这么一章《将 DOM 对象绘制到 canvas 中》
其中对插入图片有一段这样的描述:
SVG 图像不允许加载任何外部资源,即使看上去来自同一个域。资源如栅格化图像(如 JPEG 图像)或
有关插入图片的介绍就这么一段,但是我看不懂
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
文章中有这么一段demo,效果也不错,但是没有引入图片,我尝试用标签,没有什么效果
![]()
想问问如何解决这个问题?我想把图片通过这种方式绘制到canvas上
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
不太明白你想表达什么。这段代码是把SVG转成Blob,然后把img的src指向这个blob,那么img就会展现这个svg的样式。然后通过canvas把img画到画布上