如何解决在Fabric.js中堆叠图像
我正在尝试使用Fabric.js在用户上传的图像(例如JPEG)上叠加另一个图像(SVG)。我只是无法显示SVG图片。
这是我的atm:
HTML
<canvas id="canvas" width="128" height="128"></canvas>
<input type="file" id="upload">
JS
var svg = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="480pt" id="logo" preserveAspectRatio="xMidYMid meet" viewBox="0 0 480 480" width="480pt">...</svg>';
var canvas = new fabric.StaticCanvas('canvas');
document.getElementById('upload').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
canvas.clear();
var data = f.target.result;
// Image
fabric.Image.fromURL(data,function (img) {
var oImg = img.set({
left: 0,top: 0
});
if (oImg.width > oImg.height) {
oImg.scaleToHeight(128);
} else {
oImg.scaleToWidth(128);
}
canvas.add(oImg).centerObject(oImg).renderAll();
});
// Logo
fabric.Image.fromURL(svg,function(img) {
var logo = img.set({
width: 48,height: 48,bottom: 8,right: 8,opacity: 1
});
canvas.add(logo).renderAll();
});
var dataURL = canvas.toDataURL({format: 'png',quality: 0.8});
};
reader.readAsDataURL(file);
});
用户上传的图片显示正常,但我尝试放置的SVG却没有。
解决方法
我认为您所缺少的只是对svg进行编码,请参见以下示例:
function svgimage() {
var image = `<svg xmlns="http://www.w3.org/2000/svg" width="220" height="200" version="1.1"><defs><radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="20%" fy="40%"><stop offset="0%" style="stop-color:gray;stop-opacity:0"/><stop offset="100%" style="stop-color:blue;stop-opacity:1"/></radialGradient></defs><ellipse cx="110" cy="100" rx="110" ry="100" style="fill:url(#grey_blue)"/></svg>`;
return encodeURIComponent(image);
}
var canvas = new fabric.StaticCanvas('canvas');
document.getElementById('upload').addEventListener("change",function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
canvas.clear();
var data = f.target.result;
// Image
fabric.Image.fromURL(data,function(img) {
var oImg = img.set({left: 0,top: 0});
if (oImg.width > oImg.height) {
oImg.scaleToHeight(128);
} else {
oImg.scaleToWidth(128);
}
canvas.add(oImg).centerObject(oImg).renderAll();
});
// Logo
fabric.Image.fromURL('data:image/svg+xml;charset=utf-8,' + svgimage(),function(img) {
var logo = img.set({width: 148,height: 148,bottom: 8,right: 8,opacity: 1});
canvas.add(logo).renderAll();
});
var dataURL = canvas.toDataURL({format: 'png',quality: 0.8});
};
reader.readAsDataURL(file);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<input type="file" id="upload"><br>
<canvas id="canvas" width="200" height="200"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。